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

希望這將節省有人工作了幾個小時，遇到這個問題的人。