如何从深度嵌套的ng-repeats中的范围访问某些内容

时间:2017-01-17 09:39:35

标签: javascript angularjs angularjs-ng-repeat

我有一个ng-repeat,它实际上可以根据用户的操作在其内部的ng-repeats中嵌套无限数量。基本上,他们可以创建更多项目,然后允许您根据需要在该项目中创建更多项目。

现在的问题是,我需要能够访问$scope.pageId内的每个项目,以便我可以执行ng-if仅显示某些内容,具体取决于pageId。

目前$parent.pageId可以使用,但仅适用于第一项。当然,下一个嵌套项的父级将是第一个项而不是scope.page

我是否有办法将scope.pageId传递到Item的每个嵌套ng-repeat中,因为它们在$parent方面远离范围?

2 个答案:

答案 0 :(得分:1)

您可以在控制器中的任何位置访问范围的变量,包括嵌套的ng-repeat



var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = 'Mistalis';
  $scope.complexArray = [
    [
      [
        [{
          'value': 123456
        }]
      ]
    ]
  ];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="i in complexArray">
      <div ng-repeat="j in i">
        <div ng-repeat="k in j">
          <div ng-repeat="l in k">
            {{l.value}}
            <br/>My name is {{name}}!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

通常的做法是定义一个服务来保存您想要访问的数据,并在显示它的元素上使用控制器。控制器将查询服务并使视图可访问数据。

angular.module('MyApp')
  .factory('SectionNamePageIdService', [
    function() {
      return {
        setPageId: function() { ... },
        getPageId: function() { ... )
      };
    }
  ]);

angular.module('myApp')
  .directive('NestedItems', ['SectionNamePageIdService',
    function('SectionNamePageIdService') {
      return {
        restrict: 'E',
        scope: true, 
        template: '<div ng-repeat="item in nestedItems"></div>',
        controller: ['$scope', function($scope) {
          $scope.pageId = SectionNamePageIdService.getPageId();
        }]
      };
    }
  ]);

该示例假定您在父作用域中有一个nestedItems对象。您可能还需要定义一个单独的NestedItem指令来处理每个项目的显示方式。我不知道你打算如何将数据传递给嵌套项目,所以这只是一个基本的例子。您可能还想为数据定义服务。

然而,看看你的评论,我真的怀疑这样的嵌套是好的设计。从用户体验的角度来看,深度嵌套(20级!)对我来说似乎很笨重。因此,在尝试寻找技术解决方案之前,最好先在概念层面上修改问题。