在嵌套部分中访问控制器的Angular作用域

Question

在我的Angular项目中，每个页面都有一个控制器。我包括一个部分，在多个页面上使用。在每个控制器中，我初始化一些值，然后在局部中访问它们。

$scope.checkedItems = [];

部分I将数据绑定到它。

<input type="checkbox" checklist-model="$parent.$parent.$parent.$parent.$parent.checkedItems" checklist-value="item.Id">

部分是嵌套的，所以我必须多次使用$parent来访问控制器范围内的参数。这太难看了。而且，部分包含在不同页面的不同位置，因此作用域深度不一致。因此，在一些页面上，我需要上升5级，8级，4级等。

是否有更简单的方法来访问控制器的作用域?如果下面的方法有效就好了。

<input type="checkbox" checklist-model="$controllerScope.checkedItems" checklist-value="item.Id">

Answer 1

为控制器之间的数据交换创建一个服务

---

嵌套树选项

在service中创建一个具有parent->child结构的对象，在嵌套模板中存储一些唯一的id来告诉service在嵌套树中存储数据的位置

在模板的上下文中，

看起来很干净，但是所有的逻辑将被转移到service

所以在模板中你会有这样的内容:

<input type="checkbox" ng-checked="checked">

and in controller:

$scope.uniqueid='3je99ehr0jer';//generate something...
$scope.checked=false;
yourService.set($scope.uniqueid,$scope.$parent.uniqueid,$scope.checked,function(checked){
  $scope.checked=checked;
});
//where first arg is controller unique id and second parent controller uniqueid
$scope.$watch('checked',(...notify service to change data in tree...));

当你想收集完整的树时，只需使用类似yourService.getAll()的东西

树结构应该是这样的:

scope.dataTree={
  '3je99ehr0jer':{checked:true,children:[ another nodes that have parentid 3je99... ]}
}

添加/更改数据树使用一些递归函数来查找需要的id

yourService.set = function serviceSet(currentId,parentId,data,onChange){
  //find recursively parentId if not null
  // update value
  // notify parent node (or all) controllers that something has changed if you need (onChange argument)
}

---

平面对象选项

如果你想要的只是平面对象和item。id->value content那么它会更简单，因为你可以使用这样的数据来代替yourService中的dataTree:

scope.data= {
  '3je99ehr0jer':false,
  '03kefkeo0efe':true,
  ...
}

现在你不需要递归地找到id，只需要从作用域中得到你想要的。数据对象scope.data['3je99ehr0jer']

---

我懒得测试这种方法，但你会发现如何纠正一些东西，我不确定在这一点上，你需要通知yourService, $watch方法发生了变化，如果yourService中的onChange方法也需要，但你会发现，这个概念似乎是正确的-> 基于唯一id的数据交换服务

如果你发现错误告诉我，这样我可以编辑这个答案

Answer 2

我最终创建了一个数据源作为工厂。

工厂:

define([], function () {
'use strict';

function checkedItemsDataSource(){
    var dataSource = {};
    dataSource.items = [];
    dataSource.setItems = function(items){
        dataSource.items = items;
    };
    return dataSource;
}
return checkedItemsDataSource;
});

在控制器中，将检查项设置为空数组作为初始值。创建一个以工厂为值的变量。

checkedItemsDataSource.setItems([]);
$scope.checkedItemsDataSource = checkedItemsDataSource;

当需要在任何其他控制器或嵌套作用域中更改数据时，调用工厂的setItems函数。$scope的值。checkedItemsDataSource将自动更新