ng-transclude ve ng içeren iç içe açısal bir yönerge kullanarak

Question

TL; DR: Bu plunker'da, ikinci yönerge neden dahil edilen şablonu oluşturmuyor?

Bu örnek basitleştirilmiştir, ancak aslında girişimde bulunmak için yaptığım şeyi mantıklı kılan bir usecaseim var.

Verilen bir şablonu ng-include ve and ng-transclude kullanarak başka bir HTML'ye sarmak için ng-include kullanan bir Yönlü yönergem var. Kendi başına iyi çalışıyor.

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

Ama sonra bu ilk yönergesi kullanmaya çalışıyor başka bir direktif var ve onu yıkar ve sessizce başarısız yer zaten.

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

oluşturulan kaynağın baktığımızda bunu Yani bu

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

şablona yönelik referans içteki düzeyde ng-dahil benzediğini görebilirsiniz orada ama render almıyor . Plunker.

Şablonum ikinci yönergeye nereye gitti?

Answer 1

Sanırım iki şeyi değiştirerek sorununuzu gidermeyi başardım. Buradan bakın: plunker.

Bir yönerge kapsamı için "@" kullanırken, öznitelik bir dizge olarak geçirilir, bu nedenle değeri basit tırnak işaretleri arasına koymamalısınız.

Ayrıca, çünkü documentation den <div ng-include="template"/> ile şablonda <div ng-include ng-src="{{template}}"/> yerini, ng-dahil bir özellik olarak kullanıldığında src kullanmaz (ancak ilk örnekte çalıştı neden anlamıyorum ...)

Yine de yardımcı olur umarım.