Using $compile on external template (templateURL) in Angular directive

Question

I've got a recursive Angular directive that uses a template variable and gets compiled in the link function.

Problem is, that my template has gotten really long and out of control and I want to externalize it in an external HTML file (it would also make it easier for example to auto-indent).

How can you load an external template into a directive that can be used inside the $compile?

I've seen templateURL, but that doesn't let me name the variable and pass it to the $compile function.

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

and

New Dev · Accepted Answer · 2015-07-22 18:12:33Z

109

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)

edited Jul 22, 2015 at 18:12

answered Mar 4, 2015 at 20:11

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

5 Comments

CodyBugstein Over a year ago

This is awesome! You are my hero! Can I buy you a coffee?

zhekaus Over a year ago

I'm curious, is it possible to use html binding (ng-bind-html) inside the "template.html" in your illustration? I can't make it work.

New Dev Over a year ago

@zhekaus, yes, but it you still need to use the usual ngSanitize/$sanitize or otherwise use $sce.trustAsHtml

A Star Over a year ago

Do you know why this appears to uncompile whenever it is converted to a string or console logged?

AshD Over a year ago

Just curious is there is a way to maintain two way binding for the template.html

Asqan · Accepted Answer · 2015-06-08 14:07:43Z

3

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);
            });

edited Jun 8, 2015 at 14:07

Asqan

4,51912 gold badges63 silver badges103 bronze badges

answered Mar 4, 2015 at 12:43

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

3 Comments

Leonardo Over a year ago

You should cache the templates that you load, like this

$http.get('mytem.html', {cache: $templateCache}).then(function(response) {             element.html(response.data);             $compile(element.contents())(scope); })

Leonardo Over a year ago

There is a missing parenthesis in the code but I can't edit because it's less than 6 chars :)

felix at housecat Over a year ago

"The $templateRequest service runs security checks then downloads the provided template using $http and, upon success, stores the contents inside of $templateCache." AngularJS So $templateCache uses $http performing additional operations in one line. The only difference I see is that the template is not put into $templateCache, was it the purpose of your code?

Collectives™ on Stack Overflow

Using $compile on external template (templateURL) in Angular directive

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related