Korzystanie z ng-transclude i ng-include w zagnieżdżonej dyrektywie kątowej

Question

TL; DR: Na tej plunker, dlaczego druga dyrektywa nie renderuje załączonego szablonu?

Ten przykład jest uproszczony, ale mam praktyczny przykład, w którym robienie tego, co zamierzam, ma sens.

Mam dyrektywę kątową, która używa ng-include do zawijania dostarczonego szablonu do innego HTML za pomocą ng-include i oraz ng-transclude. Działa dobrze na własną rękę.

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

Ale mam kolejną dyrektywę, która próbuje użyć tej pierwszej dyrektywy i tam się zepsuje i nie powiedzie się po cichu.

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

Patrząc na wygenerowanym źródła widzę, że wygląda to tak

<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> 

tak więc odniesienia do szablonu w ng obejmują na poziomie najgłębszej jest tam, ale to nie jest uzyskiwanie renderowane . Plunker.

Więc gdzie mój szablon znalazł się w drugiej dyrektywie?

Answer 1

Myślę, że udało mi się rozwiązać twój problem, zmieniając dwie rzeczy. Zobacz tutaj: plunker.

Podczas korzystania z zakresu "@" dla zakresu dyrektywy atrybut jest przekazywany do zakresu w postaci łańcucha, dlatego nie należy umieszczać wartości między prostymi cudzysłowami.

Również Wymieniłem <div ng-include ng-src="{{template}}"/> w szablonie z <div ng-include="template"/> bo od documentation, ng obejmują nie używa src gdy używany jako atrybut (ale nie rozumiem, dlaczego to działało w pierwszym przykładzie ...)

Nadzieja, która i tak pomaga.