Question

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

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

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

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

Answer 1

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

＆＃13;

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

＆＃13;

<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;

Answer 2

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

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级！）对我来说似乎很笨重。因此，在尝试寻找技术解决方案之前，最好先在概念层面上修改问题。

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

2 个答案: