javascript 单击时控制器中的 AngularJS 更改部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16649617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS change partial in controller on click
提问by thomastuts
I'm working on a dashboard application where you have a set of modules displayed at the same time. I'd like to add multiple 'views' to these modules. For example, the first view of a Github module is a list of your repositories. When you click a repository link in that module, that view in the module would be replaced with a new screen showing all the detailed info about that repo.
我正在开发一个仪表板应用程序，您可以在其中同时显示一组模块。我想为这些模块添加多个“视图”。例如，Github 模块的第一个视图是您的存储库列表。当您单击该模块中的存储库链接时，模块中的该视图将替换为一个新屏幕，显示有关该存储库的所有详细信息。
However, I want this view to be isolated in this module so I can keep using my other modules at the same time (I do not want to switch pages at all).
但是，我希望在这个模块中隔离这个视图，这样我就可以同时继续使用我的其他模块（我根本不想切换页面）。
An example of what I'm trying to achieve can be found here: http://jsfiddle.net/5LgCZ/
我试图实现的一个例子可以在这里找到：http: //jsfiddle.net/5LgCZ/
In this example, you would click a fruit or a car and get detailed info about said item in that module in a new view. (it currently just performs an alert).
在此示例中，您将单击水果或汽车并在新视图中获取该模块中所述项目的详细信息。（它目前只执行警报）。
This is what I have so far, but I have no idea how to structure and approach this as far as controllers and views go:
到目前为止，这是我所拥有的，但我不知道如何构建和处理控制器和视图：
<div ng-app="app">
<div class="module" ng-controller="FruitCtrl">
<h1>Fruit Module</h1>
<ul>
<li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
</ul>
</div>
<div class="module" ng-controller="CarCtrl">
<h1>Car Module</h1>
<ul>
<li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li>
</ul>
</div>
</div>
Thanks in advance for anyone who will be able to help.
预先感谢任何能够提供帮助的人。
回答by mirrormx
If you wan't a couple of states to be displayed within the same HTML element, you can leverage the built-in ng-switchdirective. This will allow you to switch content of the element while at the same time maintaining the same $scopeso you can easily share the data between those states.
如果您不想在同一个 HTML 元素中显示几个状态，则可以利用内置ng-switch指令。这将允许您切换元素的内容，同时保持相同，$scope以便您可以轻松地在这些状态之间共享数据。
Here's your updated fiddle: http://jsfiddle.net/dVFeN/and below goes the explanation.
这是您更新的小提琴：http: //jsfiddle.net/dVFeN/和下面的解释。
In case of your example, it could look like this:
在您的示例中，它可能如下所示：
HTML
HTML
<div class="module" ng-controller="FruitCtrl">
<h1>Fruit Module</h1>
<div ng-switch="moduleState">
<div ng-switch-when="list">
<ul>
<li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
</ul>
</div>
<div ng-switch-when="details">
<p>Details for {{ selectedFruit }}</p>
<a href="#" ng-click="showList()">Back to list</a>
</div>
</div>
</div>
The extra variable called moduleStatedefines the current state of the widget. Thanks to the ng-switchdirective the content of the outer divautomatically switches between inner elements based on the values passed to their ng-switch-whenattributes.
调用的额外变量moduleState定义了小部件的当前状态。由于该ng-switch指令，外部div元素的内容会根据传递给它们的ng-switch-when属性的值自动在内部元素之间切换。
JS
JS
function FruitCtrl($scope)
{
$scope.moduleState = 'list';
$scope.fruits = ['Banana', 'Orange', 'Apple'];
$scope.showDetail = function(fruit)
{
$scope.selectedFruit = fruit;
$scope.moduleState = 'details';
};
$scope.showList = function()
{
$scope.moduleState = 'list';
};
}
All you have to do here is to modify the value of the moduleStatevariable, which automatically shows the desired widget view. Additionally, the introduced selectedFruitvariable holds the reference of the item to act on in the details view.
您在这里要做的就是修改moduleState变量的值，它会自动显示所需的小部件视图。此外，引入的selectedFruit变量包含要在详细信息视图中操作的项目的引用。
The advantage of using the ng-switchdirective is that you can easily add any number of states to your widget in a consistent manner.
使用该ng-switch指令的优点是您可以以一致的方式轻松地向小部件添加任意数量的状态。
You can modify your second module accordingly.
您可以相应地修改您的第二个模块。
回答by lucuma
I'm not entirely sure what you mean by a new viewand there are probably a few ways to do this, but just to get you started with one of the easiest (in my opinion), you can have a details element for each module that you show/hide based on a selection:
我不完全确定您所说的 a 是什么意思，new view可能有几种方法可以做到这一点，但只是为了让您开始使用最简单的方法之一（在我看来），您可以为每个模块设置一个 details 元素根据选择显示/隐藏：
<div class="module" ng-controller="FruitCtrl">
<h1>Fruit Module</h1>
<ul ng-show='!fruitSelected'>
<li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
</ul>
<div class="details" ng-show="fruitSelected">{{fruitSelected}}</div>
</div>
function FruitCtrl($scope) {
$scope.fruits = ['Banana', 'Orange', 'Apple'];
$scope.fruitSelected = false;
$scope.showDetail = function (fruit) {
$scope.fruitSelected = fruit;
}
}
