Javascript AngularJS嵌套ng重复访问$parent数组元素
对,所以我有一个进退两难的问题,这似乎是一个简单的问题,但我无法理解 我有一个嵌套数组:Javascript AngularJS嵌套ng重复访问$parent数组元素,javascript,arrays,angularjs,Javascript,Arrays,Angularjs,对,所以我有一个进退两难的问题,这似乎是一个简单的问题,但我无法理解 我有一个嵌套数组: $scope.rootItem = { id: '1', type: 'course', title: 'Adobe Photoshop CC for beginners', items: [{ id: '2', type: 'label', title:'Label Ti
$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:
对我来说,传递父项ngModelItem.items(items是ID:5所属的数组)是有意义的。但是我不明白为什么$parent.ngModelItem.items是未定义的
这是我的控制器:
$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>
它不起作用
以下指示:
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;
});
}
};
}
]);
角度模块('tg.dynamicDirective',[])
.directive('tgDynamicDirective',['$compile',
函数($compile){
"严格使用",;
函数templateUrlProvider(getView,ngModelItem){
如果(getView){
if(getView的类型=='function'){
var templateUrl=getView(ngModelItem)| |“”;
if(模板URL){
返回模板URL;
}
}else if(typeof getView=='string'&&getView.length){
返回getView;
}
}
返回“”;
}
返回{
限制:'E',
要求:“^ngModel”,
范围:正确,
模板:“”,
链接:功能(范围、元素、属性、模型){
范围$watch(函数(){
var ngModelItem=范围$eval(属性ngModel);
var getView=scope.$eval(attrs.tgdynamicdirectiview);
scope.ngModelItem=ngModelItem;
返回templateUrlProvider(getView,ngModelItem);
},函数(新值,旧值){
scope.templateUrl=newValue;
});
}
};
}
]);
经过几个小时的修复,并阅读了大量关于继承的文章,我发现ng如果使用原型继承创建新的作用域。我没有解释 这要求我在将$parent传递给函数时再插入一个$parent:
data-ng-click="duplicate(ngModelItem, $parent.ngModelItem.items)"
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)
};
希望这能为遇到这个问题的人节省工作时间。你能制作一把小提琴来展示你的问题吗?嘿,戈皮纳,用小提琴来重现是非常复杂的(我问fiddle是因为我看不到你的“ng repeat”代码在上面的问题中。你能粘贴所有必要的代码来反映你的问题吗?OK,当然没有问题,1秒钟提到你的指令代码,指令作用域可能有问题。我有$parent。$parent和一些必须更新的内容。添加第三个$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)
};