TypeError: Cannot read the 'childNodes' property from undefined in AngularJS directive

Question

I am making the "Tab Slide Out" directive 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) {
               ...
            }
        }

    };

If I use only one, everything works fine. However, if I use 2 or more, this will throw this TypeError error    : it is not possible to read the property "childNodes" undefined

Here is the link plunker Demo

Answer 1

What happens when you add another slider, it uses the same reference numbers handlerand container, as the first. Since 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=preview