Question

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

$scope.checkedItems = [];

在部分我将数据绑定到它。

<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

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

嵌套树选项

在服务中创建一个带有parent-＆gt;子结构的对象，在嵌套模板中存储一些唯一的id来告诉服务在嵌套树中存储数据的位置

在模板的上下文中它看起来很干净但所有逻辑都将转移到服务

所以在模板中你会有类似的东西：

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

并在控制器中：

$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... ]}
}

添加/更改dataTree使用一些递归函数来查找您需要的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-＆gt;值内容的平面对象，那么它将更简单，因为您可以使用以下数据代替以下数据：

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

现在你不需要递归地找到id但只能从scope.data对象scope.data['3je99ehr0jer']得到你想要的东西

我太懒了，无法测试这种方法，但你会弄清楚如何纠正某些问题，我现在还不确定你是否需要通过yourService方法通知$watch某些事情已经改变了如果onChange中的yourService方法也需要，但你会发现这个，这个概念似乎是正确的 - ＆gt; 基于唯一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的值将自动更新。

访问嵌套部分中控制器的角度范围

2 个答案:

嵌套树选项

平面对象选项