AngularJS - load dynamic template HTML within directive

Question

I have a directive which loads content from an external HTML file. Passed into this directive is some scope data which is used in the rendering of that HTML fragment. e.g.

<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">

</div>

What I would like to do within this directive is to load a further HTML partial within this based on the original scope data passed into the directive. I can't seem to get this to work, but it should be something along the lines of the following:

<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">

<div ng-include="partials/{{obj}}.html></div>

</div>

Using this, the file doesn't get included, but I don't get any errors either. Can anybody assist me here?

NB: I read this, which is a similar issue, but hasn't helped me.

UPDATE - I noticed in Chrome dev tools that the URL is being resolved as expected, but the file contents are not getting included. I thought from the docs that ng-include loaded and compiled the requested fragment, so I was expecting this to work.

Mark Coleman · Accepted Answer · 2013-05-08 00:24:27Z

17

Found a solution in the end, by declaring the following in the directive:

<div ng-include src="view.getView()"></div>

and the following in the directive controller:

$scope.view = {
    getView: function() {
        return "partials/" + $scope.obj + ".html";
    }
};

Works perfectly now!

edited May 8, 2013 at 0:24

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

answered Jan 31, 2013 at 9:03

jwest

7353 gold badges11 silver badges20 bronze badges

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

1 Comment

Shane Gadsby Over a year ago

You can simplify this a little, the issue is that it expects a string, not objects: <div ng-include src="'partials/'+{{obj}}+'.html'"></div>. Notice that I put single quotes around any normal text, this is what you need to force it from object literals to a string.

UtopiaLtd · Accepted Answer · 2014-08-29 18:34:04Z

1

In comment on the comment of Shane Gadsby: it is not <div ng-include src="'partials/'+{{obj}}+'.html'"></div> but <div ng-include src="'partials/'+obj+'.html'"></div>. Your comment explains why 'this is what you need to force it from object literals to a string', so everything not in single quotes is handled by the compiler as a scope object.

edited Aug 29, 2014 at 18:34

UtopiaLtd

2,5802 gold badges32 silver badges46 bronze badges

answered Aug 29, 2014 at 17:29

kinablej

314 bronze badges

Collectives™ on Stack Overflow

AngularJS - load dynamic template HTML within directive

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related