Can you change templateUrl on the fly?

by

It is possible, but when your template to be loaded depends on some scope-data you can’t use the directive’s templateUrl property anymore and you will be obliged to use lower-level API, namely $http and $compile.

Roughly what you need to do (only possible in the linking function) is to retrieve template’s content using $http (don’t forget to involve $templateCache!) and then compile template’s content “manually”.

It might sound like it is a lot of work but in practice it is rather straightforward. I would suggest having a look at the ngInclude directive sources where this pattern is used.

Here is a skeleton of such a directive:

app.directive('boom', function($http, $templateCache, $compile, $parse) {
        return {
            restrict: 'E',
            link: function(scope , iElement, iAttrs) {                            
              var boom = $parse(iAttrs.data)(scope);
              $http.get('myTemplate'+boom, {cache: $templateCache}).success(function(tplContent){
                iElement.replaceWith($compile(tplContent)(scope));                
              });              
            } 
        }
    });

assuming that it would be used as <boom data="name"></boom>. Working plunk here: http://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=preview

Please note that I’ve changed attributes evaluation from {{name}} to attributes parsing since probably a template should be determined only once, at the beginning.

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. How to set focus on input field?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. How to call a method defined in an AngularJS directive?
  5. How to use a keypress event in AngularJS?
  6. Link vs compile vs controller
  7. Angular.js directive dynamic templateURL
  8. Angularjs dynamic ng-pattern validation
  9. What is the difference between ng-app and data-ng-app?
  10. Easiest way to pass an AngularJS scope variable from directive to controller?
  11. Using angularjs filter in input element
  12. Angularjs loading screen on ajax request
  13. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  14. Directive isolate scope with ng-repeat scope in AngularJS
  15. calling method of parent controller from a directive in AngularJS
  16. Enable angular-ui tooltip on custom events
  17. Accessing attributes from an AngularJS directive
  18. How to modify scope from within a directive in AngularJs
  19. Call a method of a controller from another controller using ‘scope’ in AngularJS
  20. AngularJS: ngInclude vs directive
  21. Pass form to directive
  22. Angular directive name: only lower case letters allowed?
  23. What is `priority` of ng-repeat directive can you change it?
  24. What is ng-transclude?
  25. How to use `replace` of directive definition?
  26. How to detect browser using angularjs?
  27. AngularJS. Convert tag value (Unix time to human-readable time)
  28. How to implement an ng-change for a custom directive
  29. When to use double braces {{}} in angularJS
  30. how do I get ng-include directive to work with a Content Delivery Network?

Leave a Comment