Using $compile on external template (templateURL) in Angular directive
You can use the $templateRequest
service to get the template. This is a convenience service that also caches the template in $templateCache
, so that only a single request to template.html
is made.
As an illustration (and without going into the issue of recursive directives), this is used like so:
link: function(scope, element){
$templateRequest("template.html").then(function(html){
var template = angular.element(html);
element.append(template);
$compile(template)(scope);
});
};
plunker (check the network tab to see a single network request)
I prefer to use $http to load template if its size is bigger:-
$http.get('mytemp.html').then(function(response) {
element.html(response.data);
$compile(element.contents())(scope);
});