중첩 각도 지시문에 ng-transclude 및 ng-include 사용

Question

TL : DR :이 plunker에 왜 두 번째 지시문에 포함 된 템플릿이 렌더링되지 않습니까?

이 예제는 단순화되었지만 실제로 시도하려는 것을 수행하는 것이 의미가있는 사용 사례가 있습니다.

ng-include 및 ng-transclude를 사용하여 제공된 템플릿을 다른 HTML로 래핑하는 ng-include를 사용하는 Angular 지시문이 있습니다. 그것은 독자적으로 잘 작동합니다.

.directive('content', [function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     controller: 'contentCtrl', 
     template: '' + 
      '<div class="foo">' + 
      ' <div ng-transclude></div>' + 
      '</div>', 
     scope: { 
     } 
    }; 
}]) 

.directive('contentInner', [function() { 
    return { 
     restrict: 'E', 
     require: '^content', 
     transclude: true, 
     replace: true, 
     scope: { 
     }, 
     template: '' + 
      '<div class="body">' + 
      ' <div class="close" ng-click="close()">' + 
      ' <i class="icon-remove-sign"></i>' + 
      ' <span>Close</span>' + 
      ' </div>' + 
      ' <div ng-transclude ></div>' + 
      '</div>', 
     link: function(scope, element, attrs, controller) { 
      scope.close = function() { 
       controller.close(); 
      }; 
     } 
    }; 
}]) 

하지만이 지시어를 사용하려고하는 또 다른 지시문이 있는데, 그것이 고장이 났을 때 자동으로 실패합니다.

.directive('box', ['$compile', function($compile) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      template: '@' 
     }, 
     template: '' + 
      '<div>' + 
      ' <content>' + 
      ' <content-inner>' + 
      '  <div ng-include ng-src="{{template}}"/>' + 
      ' </content-inner>' + 
      ' </conent>' + 
      '</div>', 
     link: function(scope, element) { 
      //$compile(element)(scope); 
     } 
    }; 
}]); 

생성 된 소스를 보면 내가 그래서이

<div template="'template.html'"> 
    <div class="foo"> 
    <div ng-transclude=""> 
     <div class="body ng-scope"> 
     <div class="close" ng-click="close()"> 
      <i class="icon-remove-sign"></i> 
      <span>Close</span> 
     </div> 
     <div ng-transclude=""> 
      <div ng-include="" ng-src="'template.html'" 
       class="ng-scope" src="'template.html'"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

에 템플릿에 대한 참조 가장 안쪽의 수준에서 NG-포함처럼 보이는 것을 알 수있는 것은이 있지만 렌더링지고 있지 않습니다 . Plunker.

그럼 내 템플릿은 두 번째 지시문에 포함되어 있습니까?

Answer 1

두 가지를 변경하여 문제를 해결할 수 있다고 생각합니다. 여기에서보십시오 : plunker.

지시문 범위에 "@"을 사용하면 특성이 범위로 문자열로 전달되므로 값을 간단한 따옴표로 묶어서는 안됩니다.

또한, 나는 때문에 documentation에서 <div ng-include="template"/>와 템플릿에 <div ng-include ng-src="{{template}}"/> 교체, NG-포함 속성으로 사용하는 경우 SRC를 사용하지 않습니다 (하지만 첫 번째 예에서 일을 왜 이해가 안 돼요 ...)

어쨌든 도움이 되길 바랍니다.