AngularJS嵌套ng-repeat访问$父数组元素

Question

对，所以我有一个困境，这似乎是一个简单的问题，但我无法弄清楚。

我有一个嵌套的数组：

$scope.rootItem = { 
     id: '1', 
     type: 'course', 
     title: 'Adobe Photoshop CC for beginners', 
     items: [{ 
      id: '2', 
      type: 'label', 
      title:'Label Title', 
      items:[{ 
       id: '3', 
       type: 'module', 
       title:'Module title', 
       items: [{ 
        id: '4', 
        type: 'topic', 
        title:'Topic title', 
        items: [{ 
         id: '5', 
         type: 'content', 
         title:'Content title' 
        }, { 
         id: '6', 
         type: 'content', 
         title:'Content title' 
        }] 
       }] 
      },{ 
       id: '7', 
       type: 'resources', 
       title:'Resources' 
      },{ 
       id: '8', 
       type: 'module', 
       title:'Module title', 
       items: [{ 
        id: '9', 
        type: 'topic', 
        title:'Topic', 
        items: [{ 
         id: '10', 
         type: 'question', 
         title:'Question title' 
        }] 
       }, { 
        id: '11', 
        type: 'topic', 
        title:'Topic title', 
        items: [{ 
         id: '12', 
         type: 'content', 
         title:'Content title' 
        }] 
       }] 
      }] 
     },{ 
      id: '14', 
      type: 'assessmentLabel', 
      title: 'Assessment Label', 
      items: [{ 
       id: '15', 
       type: 'assessment', 
       title: 'Assessment Title', 
       items: [{ 
        id: '16', 
        type: 'courseAssessment', 
        title: 'Course Assessment Question', 
        items: [] 
       }] 
      }] 
     }] 
    }; 

即使用纳克重复输出。所有的工作都很棒，顺便说一下，它也可以使用ng-sortable（基于JQuery UI Sortable）进行排序。

我想要做的是重复让我们说ID：5使用angular.copy()。

HTML：

<a href="" title="Duplicate Content" data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)"> 
<span class="icon-duplicate"></span> 
</a> 

这似乎很好地工作过。我可以将对象传递给函数。

当我尝试将该对象推送到其父数组时，问题就出现了。我读到$父，因此我认为是有意义的传递$parent.ngModelItems.items到NG-点击：

data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)" 

这对我来说很有意义，通过父母ngModelItem.items（项目是阵列ID：5部分）。但我不明白为什么我将$ parent.ngModelItem.items设置为undefined。

这是我的控制器：

$scope.duplicate = function(item, parent) { 
     var itemCopy = angular.copy(item); 

     parent.push(item); 
    }; 

HTML NG-重复：

<ul class="apps-container" ui-sortable="sortableOptions" ng-model="ngModelItem.items" ng-class="ngModelItem.type"> 
      <li class="innerCont" ng-repeat="innerItem in ngModelItem.items"> 
       <tg-dynamic-directive ng-model="innerItem" tg-dynamic-directive-view="getView"> 
       </tg-dynamic-directive> 
      </li> 
     </ul> 

但是角度似乎有不同的想法。所以我想我的问题是我如何传递父母ngModelItem.items（rootItem.items），以便我可以访问该数组？

有人能解释为什么{{$parent.$parent.ngModelItems.id}}返回正确的父母身份证。 然而，当我试图在父母传递给函数如

data-ng-click="duplicate(parent.parent.ngModelItem.items)" 

它不工作，下面

指令：

angular.module('tg.dynamicDirective', []) 
    .directive('tgDynamicDirective', ['$compile', 
     function($compile) { 
      'use strict'; 

      function templateUrlProvider(getView, ngModelItem) { 
       if (getView) { 
        if (typeof getView === 'function') { 
         var templateUrl = getView(ngModelItem) || ''; 
         if (templateUrl) { 
          return templateUrl; 
         } 
        } else if (typeof getView === 'string' && getView.length) { 
         return getView; 
        } 
       } 
       return ''; 
      } 

      return { 
       restrict: 'E', 
       require: '^ngModel', 
       scope: true, 
       template: '<div ng-include="templateUrl"></div>', 
       link: function(scope, element, attrs, ngModel) { 

        scope.$watch(function() { 
         var ngModelItem = scope.$eval(attrs.ngModel); 
         var getView = scope.$eval(attrs.tgDynamicDirectiveView); 
         scope.ngModelItem = ngModelItem; 
         return templateUrlProvider(getView, ngModelItem); 
        }, function(newValue, oldValue) { 
         scope.templateUrl = newValue; 
        }); 
       } 
      }; 
     } 
    ]); 

Answer 1

的试图解决这一问题几小时后，阅读许多关于$scope继承的文章我发现ng-if使用原型继承来创建新的范围。我没有考虑到这一点。

这需要我将它传递时的功能，例如插入一个更$父：

data-ng-click="duplicate(ngModelItem, $parent.$parent.$parent.ngModelItem)" 

，然后在控制器做这样的事情：

$scope.duplicate = function(item, parent) { 
     var itemCopy = angular.copy(item); 
     var parentArray = parent.items; 
     parentArray.push(itemCopy) 
    }; 

希望这将节省有人工作了几个小时，遇到这个问题的人。