AngularJS : 중첩 된 ng-repeat가있는 $ 컴파일

Question

접을 수있는 패널처럼 동작하는 간단한 지시문을 만들었습니다.

이 지시어의 내용에는 ng-repeat 템플릿을 패널로 만들 항목 템플릿이 추가됩니다. 템플릿 자체에 ng-repeat가있는 경우 모두 모든 데이터 소스 항목에 액세스 할 수 있지만 잘 작동하지는 않습니다. http://plnkr.co/edit/7mhlO3GJTmFpyF1wrVYg

당신은 심지어 정적 데이터 자식 NG가 반복 제대로 컴파일되는 것을 볼 수 있습니다

여기 데모입니다.

app.directive('collapsible', ['$compile', function($compile) { 
    return { 
     restrict: 'A', 
     scope: { 
     srcData: "=ngModel" 
     }, 
     link: function($scope, $element){ 

     // Extract the item template from the directive content 
     var children = $element.children(); 

     // Wrap the item template with the repeater 
     var template = angular.element('<div ng-repeat="item in srcData"></div>'); 
     template.append(children); 

     var cfn = $compile(template); // compile 
     cfn($scope);     // attach the scope 
     $element.html(template);  // add it back to the directive content 

     $element.on('click', 'h3 .button', function(e){ 
      e.stopPropagation(); 

      var $this = $(this); 
      if($this.hasClass('close')){ 
       $scope.srcData.splice($this.scope().$index, 1); 
       $scope.$apply(); 
      } 
     }); 

     $element.on('click', 'h3', function(e){ 
      e.stopPropagation() 

      var $this = $(this); 
      $(this).next('div').toggle(); 
     }); 

     } 
    }; 

    }]); 

Answer 1

AH :

여기 지시어입니다! 알았다!!

그래서 문제는 중첩 된 ng-repeat가 아닌 지시문 내부의 템플릿 개념을 사용합니다.

당분간 혼자 남겨두기 위해 각을 말하기 위해서 <script type="text/ng-template">으로 템플릿을 감쌀 필요가 있습니다.

app.directive('collapsible', ['$compile', function($compile) { 
    return { 
     restrict: 'A', 
     scope: { 
     srcData: "=ngModel" 
     }, 
     link: function($scope, $element){ 

     // Extract the item template from the directive content 
     var children = $element.find('script').html(); 

     // Wrap the item template with the repeater 
     var template = $('<div ng-repeat="item in srcData"></div>'); 
     template.append(children); 

     var cfn = $compile(template); // compile 
     cfn($scope);     // attach the scope 
     $element.html(template);  // add it back to the directive content 

     $element.on('click', 'h3 .button', function(e){ 
      e.stopPropagation(); 

      var $this = $(this); 
      if($this.hasClass('close')){ 
       $scope.srcData.splice($this.scope().$index, 1); 
       $scope.$apply(); 
      } 
     }); 

     $element.on('click', 'h3', function(e){ 
      e.stopPropagation() 

      var $this = $(this); 
      $(this).next('div').toggle(); 
     }); 

     } 
    }; 

    }]);