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?

Answer 1

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.