对,所以我有两难,这似乎是一个简单的问题,但我无法弄明白。
我有一个嵌套数组:
$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-repeat输出。所有工作都很棒,顺便说一下,它也可以使用ng-sortable进行排序(基于JQuery UI Sortable)。
我尝试做的是使用angular.copy()
复制让我们说id:5。
HTML:
<a href="" title="Duplicate Content" data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)">
<span class="icon-duplicate"></span>
</a>
这似乎也很好。我能够将对象传递给函数。
当我尝试将该对象推送到其父数组时出现问题。我读到了关于$ parent的内容以及我认为有意义的是将$parent.ngModelItems.items
传递给ng-click:
data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)"
对我来说有意义,传递父项ngModelItem.items(项目是ID:5所属的数组)。但我无法弄清楚为什么我将$ parent.ngModelItem.items定义为未定义。
这是我的控制者:
$scope.duplicate = function(item, parent) {
var itemCopy = angular.copy(item);
parent.push(item);
};
HTML ng-repeat:
<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}}
会返回正确的父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;
});
}
};
}
]);
答案 0 :(得分:1)
经过几个小时的尝试解决这个问题,并阅读了大量有关$scope
继承的文章后,我发现ng-if使用原型继承创建新范围。我没有考虑到这一点。
这要求我在将其传递给函数时再插入一个$ parent:
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)
};
希望这可以节省一些工作时间,无论谁遇到这个问题。