Angular ng-include, can it take an http address?

Question

I am working with angular and am making liberal use of the ng-include directive.

<div class="header" ng-include src= "'partials/header.html'"></div>

This is working great, so long as the file partials/header.html is found in my file system at the correct spot.

Is there a way to use an http address for this, instead of a local file? I haven't really found anything in the docs saying so. I mean something like this.

<div class="header" src= "'http://someaddress.com/partials/header.html'"></div>

Does anyone know if this either possible or if not, is there a similar workaround?

Sure, it's possible if you build a directive that performs the code behind required to make it happen. — Kevin B, Mar 11 '15 at 14:43
Of course, if you don't own someaddress.com and it isn't implementing cors, you'll first have to resolve that issue. — Kevin B, Mar 16 '15 at 15:31
yea of course. You gave me a good idea at least. I would accept your answer if it were in answer form :) — Zack, Mar 16 '15 at 16:41

score 0 · Accepted Answer · answered Mar 17 '15 at 15:15

This functionality is not built-in with angular, however, you could create your own directive that does this. All it would need to do is send off an http request to the provided url (assuming the server that the url references is implementing CORS)

However, it's probably a bad idea to do this due to the digest cycle, you'll end up sending far more http requests than needed (if it doesn't crash immediately due to an infinite digest loop.)

I would instead just make a service and use it within your controller to get the content once on initialization rather than once per digest cycle in a directive.

thanks for replying back in greater detail. Appreciate the effort! — Zack, Mar 20 '15 at 19:12

Angular ng-include, can it take an http address?

1 Answers1