형식 오류 : 재산 'childNodes에'를 읽어 AngularJS와의 정의의 수 없습니다가

Question

은 내가 하나를 사용하는 경우 지침이

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

    }; 

처럼 AngularJS와에서 "탭 밀기"만드는 중이 지시어, 모든 것이 잘 작동합니다. 내가 2 이상을 사용하는 경우 그러나,이 오류를 형식 오류가 발생합니다 : 여기

정의되지 않은의 특성 'childNodes에'를 읽을 수 없습니다하면 다른 슬라이더를 추가 할 때입니다 무슨 일이 일어나고 무엇 plunker 링크 Demo

Answer 1

에게 있습니다 동일한 handler 및 container 참조가 첫 번째 참조로 사용됩니다. append는 DOM에 현재 존재하는 요소를 실제로 이동시킬 것이므로 첫 번째 지시문에서 제거됩니다.

각 인스턴스에 대해 새 요소를 만들거나 복제해야합니다. http://plnkr.co/edit/CC2bCXdaoAo7HjQ0oAu0?p=preview