TypeError: Cannot read property 'childNodes' of undefined in AngularJS directive

Question

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) {
               ...
            }
        }
        
    };

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

Here is the plunker link Demo

Solution

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.

You need to create new elements for each instance (or clone them). http://plnkr.co/edit/CC2bCXdaoAo7HjQ0oAu0?p=preview