类型错误:无法读取属性AngularJS指令未定义“子节点” [英] TypeError: Cannot read property 'childNodes' of undefined in AngularJS directive
问题描述
我想提出一个指令选项卡滑出,在这样的AngularJS
I am making a directive "Tab Slide Out" in AngularJS like this
angular.module('myApp',[]).directive('tabSlideOut', ["$window", "$document", "$timeout", function($window, $document, $timeout) {
// default settings of a regular tab slide out
var defaultSettings = {
speed: 300,
action: 'click',
tabLocation: 'left',
top: '200px',
left: '50px',
fixedPosition: true,
positioning: 'absolute',
onLoadSlideOut: false
}
// handler element
var handler = angular.element('<a class="handler btn">{{title}}</a>');
// panel element aka container
var container = angular.element('<div ng-transclude></div>');
return {
restrict: 'E',
transclude: true,
replace: true,
template: '<div class="tab-slide-out"></div>',
scope: {
options: "=",
status: "=",
title: "@"
},
compile: function(template) {
// append handler to template
template.append(handler);
// append container to template
template.append(container);
console.log(template);
// return linking function
return function(scope, element, attrs) {
...
}
}
};
如果我只用一个,一切工作正常。不过,如果我使用2个或更多,它会抛出这个错误
类型错误:无法读取的特性子节点未定义
If I use only one, everything works fine. However, if I use 2 or more, it will throw this error TypeError: Cannot read property 'childNodes' of undefined
下面是plunker链接
演示
Here is the plunker link Demo
推荐答案
发生了什么事是,当你添加它使用相同的处理另一个滑块
和容器
引用的第一个。作为附加实际上将移动元件,如果当前存在在DOM,它被从第一指令删除。
What's happening is when you add another slider it uses the same handler
and container
references as the first one. As append will actually move the element if it currently exists in the DOM, it is removed from the first directive.
您需要为每个实例创建新的元素(或克隆它们)。
http://plnkr.co/edit/CC2bCXdaoAo7HjQ0oAu0?p=$p$pview一>
You need to create new elements for each instance (or clone them). http://plnkr.co/edit/CC2bCXdaoAo7HjQ0oAu0?p=preview
这篇关于类型错误:无法读取属性AngularJS指令未定义“子节点”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!