在 ViewModels 中拆分 AngularJS 中的代码答案

【问题标题】：Split code in AngularJS in ViewModels在 ViewModels 中拆分 AngularJS 中的代码
【发布时间】：2016-02-07 11:58:10
【问题描述】：

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

因为项目必须从一个视图进入另一个视图，所以我必须拆分代码以使视图模型相互通信。现在，代码工作的唯一方法是将它们放在同一个 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

【问题讨论】：

标签： javascript html angularjs mvvm

【解决方案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

【讨论】：

非常感谢！到处都找不到。