类型错误：无法读取属性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屋！