Dynamic load of templateUrl within directive

Question

I target the right template url value inside the directive as my directive console.log() shows but the template doesn't load.

directive:

app.directive('customtemp', function($parse) {
  var x="";
   return {
        scope: {
      tempUrl:"=" 
    },       
       link: function(scope, element, attrs) {
           console.log(scope.tempUrl);  
           x = scope.tempUrl;
       },
      templateUrl: x
   }
});

Template:

<div ng-init="template = attobj.template">
  <customtemp temp-url="template">
  </customtemp>
</div>

What am I missing here, a second return for templateUrl?

http://stackoverflow.com/questions/33996474/how-to-load-dynamic-inline-template-with-angular/34007542#34007542 — Al Ex Tsm, Nov 30 '15 at 20:42

cagica · Answer 1 · 2015-11-26T10:03:59.083

0

You can use ng-include to do this, I think you can't use it like you did.

       link: function(scope, element, attrs) {
           scope.getContentUrl = function() {
                return attrs.tempUrl;
           }
       },
       template: '<div ng-include="getContentUrl()"></div>'

edited Nov 26 '15 at 10:03

answered Nov 26 '15 at 09:47

cagica

678
4
23

I allready have a version using ng-include, I don't wish to use it inside nested ng-repeats because the performance goes out the window – Al Ex Tsm Nov 26 '15 at 09:51
It is very fast with a directive to load the template. Static url works fine but I havn't been able to get it to work with dynamic URL. Pretty sure I am not setting correctly up the return structure of the directive – Al Ex Tsm Nov 26 '15 at 09:52
Other way is to compile the html template in the link function and add it to your div. – cagica Nov 26 '15 at 09:53
Something like my answer in this post. Does it make sense to your needs? Do you have pre build templates, or you wan't to be able to build a template on the go? http://stackoverflow.com/questions/33801446/how-do-i-use-ng-click-in-link-call-within-a-directive/33802081#33802081 – cagica Nov 26 '15 at 09:55
pre-built templates as – Al Ex Tsm Nov 26 '15 at 09:58
You can use a function in templateUrl. templateUrl: function(elem, attr){ return attr.tempUrl; } – cagica Nov 26 '15 at 10:07
I had tried that but the way I have things set up in the directive if I add what u point out attrs.tempUrl holdes the value "template" – Al Ex Tsm Nov 26 '15 at 10:08
as string not the actual value – Al Ex Tsm Nov 26 '15 at 10:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96232/discussion-between-pcagica-and-al-ex-tsm). – cagica Nov 26 '15 at 10:09

Dynamic load of templateUrl within directive

1 Answers1