Question

我很好奇，有没有一种方法可以处理/实现2个嵌套控制器之间的2路数据绑定。让我解释一下这个场景。

我有一个formController，其中包含一些表单元素。其中一个表单元素是一个多选小部件，为此我创建了一个可以在其他地方使用的部分html，并且这部分运行时使用单独的Controller，让它调用multiSelectController（注意，此控制器/部分/视图嵌套在其中） form / formController）。

我想要的是能够使用formController（具有数据），传入一个＆＃34;选择＆＃34;的列表。项目，如[1,3,7,10]到多选部分，然后将能够使用选择的正确项目呈现窗口小部件。同时，当从多选部分中取消选择或选择项目时，我希望能够将新选择的列表传递给formController / scope（因此我可以显示现在选择说1,3,5）。

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

Answer 1

根据我的最佳方式是：

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

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>

Answer 2

由于formController是父控制器，您无需担心访问其模型/ varaibales，只需在子域的范围内添加$ parent即可访问任何父属性

$scope.$parent.someProperty

因此，如果您更改或更新此变量，它也会在父级范围内自动更新。

Angular.js两个嵌套控制器之间的双向数据绑定

2 个答案: