javascript - 两个嵌套 Controller 之间的Angular.js双向数据绑定(bind)

我很好奇，有没有一种正确的方法应该处理/实现两个嵌套控制器之间的2种方式的数据绑定。让我解释一下情况。

我有一个formController，其中包含一些表单元素。表单元素之一是multiselect小部件，我为其创建了可在其他地方使用的部分html，并且该部分html由单独的Controller运行，将其称为multiSelectController（请注意，该controller / partial / view嵌套在其中form / formController）。

我想要的是能够拥有formController（具有数据），将“选定”项的列表（例如[1、3、7、10]）传递给multiselect局部，然后它将能够使用正确的项目渲染窗口小部件。同时，当从多选部分中取消选择或选择一项时，我希望能够将新选择的列表传递给formController / scope（这样我可以显示现在选择了1、3、5）。

因此，为了简化问题，我想知道在保留数据绑定的同时将模型/变量传递给子视图/控制器的最佳/正确方法是什么，因此子视图/控制器可以在其中更改所述变量同时更新父级。

最佳答案

根据我的最佳方法是：


创建一个将包含所有模型变量的服务。

angular.service("dataService", function() {

    this.value1 = "";
    this.value2 = "";
});

在控制器中引用该服务，并将其引用保存在范围中。

angular.controller("myCntrl1", function($scope, dataService) {
    $scope.dataService = dataService;
});


angular.controller("myCntrl2", function($scope, dataService) {
    $scope.dataService = dataService;
});

现在在您的html中，您可以使用服务引用来引用所有模式变量：

    // Controller 1 view
    <div ng-controller="myCntrl1">
        <input type="text" ng-model="dataService.value1" />
    </div>

    // Controller 2 view
    <div ng-controller="myCntrl2">
        The value entered by user is {{dataService.value1}}
    </div>