Угловая директива с динамическим шаблономUrl и Transclude

Question

Вот проблема. Мне нужно передать директиву2 в директиву1. Директива1 имеет динамический шаблон url. В шаблоне есть раздел, в котором будет размещен код с переходом (другая директива). Это не работает, если я не окружу element.find (ниже) с $ timeout. После того, как страница будет отображена, директива будет встроена в шаблон. Но я не могу заставить его работать без тайм-аута.

<directive1> 
    <directive2></directive> 
</directive1> 

Directive1

app.directive("directive1", function() { 
    return { 
     replace: true, 
     transclude: true, 
     template: '<ng-include src="getTemplateUrl()" />', 
     scope: { 
      id: "=" 
     }, 
     link: function (scope, element, attrs, controller, transclude) { 
      scope.getTemplateUrl = function() { 
       return "template" + scope.id + ".html"; 
      }; 

      element.find(".placeholderForDirective2").append(transclude()); 

     } 
    } 
}) 

Template1:

<div> 
    <div class="placeholderForDirective2"></div> 
    <div>blah blah blah</div> 
</div> 

Answer 1

Это абсолютно ожидается: ng-include асинхронный, а код в функции связи синхронно. element.find() будет работать, безусловно, до Угловой имеет время, чтобы получить "template" + scope.id + ".html".

Вы можете слушать ng-include «s '$includeContentLoaded' событие, а затем вызвать element.find():

scope.$on('$includeContentLoaded', function() { 
    element.find(".placeholderForDirective2").append(transclude()); 
}); 

Answer 2

ngInclude предоставляет несколько вариантов, чтобы получать уведомления, когда шаблон загружается.

Вы можете использовать атрибут onload, чтобы оценить выражение, когда шаблон загружается:

<ng-include src="getTemplateUrl()" onload="myFunction()" />

Он также излучает события, которые вы можете слушать, а именно $includeContentLoaded события.

scope.$on('$includeContentLoaded', myFunction);