javascript angular js 嵌套控制器列表/项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16430886/
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
angular js nested controllers list/item
提问by dre
I am new to angular and wanted advice on the best route to achieve something like this. This jsFiddle doesn't work but here is the idea.
我是 angular 的新手，想要获得有关实现此类目标的最佳路线的建议。这个 jsFiddle 不起作用，但这是想法。
I want tabs along the top with items available for selection. When you select the item, the data is populated below.
我想要顶部的选项卡，其中包含可供选择的项目。当您选择该项目时，数据将填充在下方。
I wanted to have a ListController and an ItemController, so i can separate out the methods that act on the list vs that act on the item; since i wanted the items to be updatable directly. I am getting all the data on the page load, so i don't want to load each tab dynamically.
我想要一个 ListController 和一个 ItemController，所以我可以将作用于列表的方法与作用于项目的方法分开；因为我希望项目可以直接更新。我正在获取页面加载的所有数据，所以我不想动态加载每个选项卡。
How can i do this and/or how can i fix the fiddle or new fiddle? jsFiddleplunker
我该怎么做和/或如何修复小提琴或新小提琴？ jsFiddle plunker
<div ng-app="myApp">
<div ng-controller="ListController">
<ul class="nav nav-pills">
<li ng-repeat="artist in list">
<a show-tab="" ng-href="" ng-click="select(artist)">{{$index}} - {{artist.name}}</a>
</li>
</ul>
<div ng-controller="ItemController">
<p>{{name}} - {{selected.name}}</p>
<span>{{totalSongs}}</span>
<span>{{selected.songs.length}}</span>
<ul>
<li ng-repeat="song in selected.songs" ng-controller="ItemController">{{song}} - {{totalSongs}}</li>
</ul>
</div>
</div>
</div>
I would really like to keep the controllers separate and logic separate.
我真的很想将控制器和逻辑分开。
回答by jdstein1
I created some functionality in the ItemController to illustrate how you could act on them separately: http://jsfiddle.net/jdstein1/LbAcz/
我在 ItemController 中创建了一些功能来说明如何分别对它们进行操作：http: //jsfiddle.net/jdstein1/LbAcz/
Added some data to the list controller:
向列表控制器添加了一些数据：
$scope.list = [{
name: "Beatles",
songs: [{
title: "Yellow Submarine",
time: "424"
}, {
title: "Helter Skelter",
time: "343"
}, {
title: "Lucy in the Sky with Diamonds",
time: "254"
}]
}, {
name: "Rolling Stones",
songs: [{
title: "Ruby Tuesday",
time: "327"
}, {
title: "Satisfaction",
time: "431"
}]
}];
And fleshed out the item controller:
并充实了项目控制器：
app.controller('ItemController', ['$scope', function ($scope) {
$scope.selectItem = function (song) {
$scope.song.time++;
};
}]);
