angular js嵌套控制器列表/项目

Question

我是新手,想要获得最佳路线以达到这样的目标.这个jsFiddle不起作用,但这是一个想法.

我希望在顶部有标签可供选择的项目.选择项目时,下面会填充数据.

我想要一个ListController和一个ItemController,所以我可以将列表上的行为与作用于物品的行为区分开来; 因为我希望项目可以直接更新.我正在获取页面加载的所有数据,所以我不想动态加载每个选项卡.

我怎么能这样做和/或如何修复小提琴或新小提琴？ 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>

我真的想保持控制器分离和逻辑分离.

Answer 1

我在 ItemController 中创建了一些功能来说明如何单独对它们进行操作： http://jsfiddle.net/jdstein1/LbAcz/

添加一些数据到列表控制器：

$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"
    }]
}];

并充实了项目控制器：

app.controller('ItemController', ['$scope', function ($scope) {
    $scope.selectItem = function (song) {
        $scope.song.time++;
    };
}]);