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提供了几个在加载模板时得到通知的选项。

您可以使用DataManager.class属性在加载模板时评估表达式：

onload

它还会发出您可以收听的事件，特别是<ng-include src="getTemplateUrl()" onload="myFunction()" />事件。

$includeContentLoaded

Answer 2

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

您可以收听ng-include的{{1}}事件，然后致电'$includeContentLoaded'：

element.find()

具有动态templateUrl和Transclude

2 个答案: