在ViewModels中的AngularJS中拆分代码

Question

我有一个包含多个视图和视图模型的页面。在这个页面中有一个点击功能，它涉及两个不同的视图模型。

因为项目必须从一个视图进入另一个视图，所以我必须拆分代码以使视图模型相互通信。现在，代码工作的唯一方法是将它们放在同一个ng-controller（josblistViewModel）中。

我想拆分代码并将第二个列表移动到另一个ng-controler（timelineViewModel）

下面你可以看到我想要实现的快速草图。

我使用的代码是：

app.controller('joblistViewModel', ['$scope', function ($scope) {


$scope.listA = [{ copies: 5 }, { copies: 2 }, { copies: 7 }, { copies: 4 }, { copies: 3 }, { copies: 6 }];
$scope.listB = [];

$scope.toB = function (item) {
   for (var i = 0; i < item.copies; i++) {
    $scope.listB.push(item);
    }
    $scope.listA.splice($scope.listA.indexOf(item), 1);
    };
}

]）;

timelineViewModel.js为空。 我做了一个plunker所以你可以看到：

Plunker

Answer 1

有很多方法可以解决这个问题。最快的方法是创建一个父控制器，在其中初始化2个列表。 2个子控制器将继承父级的范围，并在其范围内有两个列表。

app.controller('parentController', ['$scope', function ($scope) {
    $scope.listA = [...];
    $scope.listB = [];
}]);

和html：

<div ng-controller="parentController">

    <div ng-controller="joblistViewModel">
        <div ng-repeat="item in listA track by $index" ng-click="toB(item)"><span>Open: {{ item.copies }} x</span></div>
    </div>

    <div ng-controller="timelineViewModel">
        <div class="item" ng-repeat="item in listB track by $index"><span>Open: {{ item.copies }} x</span></div>
    </div>

</div>

我创建了一个plunker。

即使这样可行，对两个子视图使用指令也更容易维护，并将两个列表作为参数传递。

您可以在此页面的“隔离指令范围”部分找到示例：https://docs.angularjs.org/guide/directive