AngularJS $compile HTML from templateURL

Question

There is the following way to add HTML dynamically in AngularJS

   var template = '<div>{{value}}</div>';
   var element = angular.element(template);
   placeholder.replaceWith(element);
   $compile(element)($scope);

Is it possible to do the same from templateURL or load template separately? (with standard mechanism so that it is cached in $templateCache)

Stewie · Accepted Answer · 2014-01-19 23:40:09Z

22

Sure, you simply use $http service to fetch the template and than compile and insert it manually. $http service will take care of caching implicitly.

PLUNKER

(Simplest) directive:

app.directive('message', [
  '$http',
  '$compile',
  function($http, $compile) {
    var tpl = "template.html";

    return {
      scope: true,
      link: function(scope, element, attrs){
        scope.message = attrs.message;

        $http.get(tpl)
          .then(function(response){
            element.html($compile(response.data)(scope));
          });
      }
    };

  }
]);

View:

<span message="Hi World!"></span>
<span message="My name is Angular."></span>

Directive template (template.html):

<span>{{message}}</span>

answered Jan 19, 2014 at 23:40

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

3 Comments

Nilesh Over a year ago

Also it will be better if you use $templateCache service to cache the template.

Interarticle Over a year ago

To handle all these details ($templateCache) automatically, just use $templateRequest.

Miao1007 Over a year ago

Thanks, before i use $rootScope and it was really slow. now fixed.

Collectives™ on Stack Overflow

AngularJS $compile HTML from templateURL

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related