具有动态templateUrl和Transclude的Angular指令

Question

这是问题所在。 我需要将directive2传递给directive1。 Directive1有一个动态templateUrl。 模板有一个部分可以托管被转换的代码（另一个指令）。 除非我用$ timeout包围element.find（下面），否则这不起作用。 呈现页面后，该指令将嵌入到模板中。 但是如果没有超时，我无法让它工作。

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

指令1

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());

        }
    }
})

模板1：

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

Answer 1

ngInclude提供了几个在加载模板时通知的选项。

您可以使用onload属性在加载模板时计算表达式：

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

它还会发出您可以侦听的事件，特别是$includeContentLoaded事件。

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

Answer 2

这是绝对期望的： ng-include是异步的，而link函数中的代码是同步的。 在 Angular有时间获取"template" + scope.id + ".html" 之前 ， element.find()肯定会运行。

您可以监听ng-include的'$includeContentLoaded'事件，然后调用element.find() ：

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