Angular directive with dynamic templateUrl and Transclude

Question

Here's the issue. I need to pass a directive2 into directive1. Directive1 has a dynamic templateUrl. A template has a section that would host transcluded code (another directive). This does not work unless I surround element.find (below) with a $timeout. Once the page is rendered, the directive will be embedded into the template. But I can't get it to work without the 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>

Sunil D. · Accepted Answer · 2015-12-08 17:19:38Z

2

ngInclude provides a couple of options to be notified when the template is loaded.

You can use the onload attribute to evaluate an expression when the template is loaded:

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

It also emits events that you can listen for, specifically the $includeContentLoaded event.

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

answered Dec 8, 2015 at 17:19

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Beck Over a year ago

This is a much much better approach than rummaging around in the DOM with element.find().

Nikos Paraskevopoulos Over a year ago

That was 6 seconds indeed :D

Nikos Paraskevopoulos · Accepted Answer · 2015-12-08 17:19:32Z

1

This is absolutely expected: ng-include is asynchronous, while the code in the link function is synchronous. The element.find() will run most certainly before Angular has had the time to fetch the "template" + scope.id + ".html".

You can listen to ng-include's '$includeContentLoaded' event and then call element.find():

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

answered Dec 8, 2015 at 17:19

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

1 Comment

Sunil D. Over a year ago

You beat me by six seconds :)

Collectives™ on Stack Overflow

Angular directive with dynamic templateUrl and Transclude

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related