AngularJS Dynamic TemplateUrl Value

Question

I'm trying to pass an already dynamic value to my directive to fetch a templateUrl for this value. Let me explain with some Sourecode:

<p ng:repeat="cell in field.Cells">
   <cell-element handler="{{cell.handler}}"/>
   <!-- cell.handler is e.g. "User" -->
</p>

myapp.directive('cellElement', function() {
  return {

    restrict: 'E',       

    templateUrl: function (tElement, tAttrs, $compile) {
      return '/ajax/' + tAttrs.handler == undefined ? 'foo' : tAttrs.handler +'.html';
    },       
 }
 });

Unfortunately, the value of tAttrs.handler is always the literal expression "{{cell.handler}}" instead of the respective value. I tried so many different ways - any guess?

UPDATE:

myapp.directive('cellElement', function() {
return {        
   restrict: 'E',
   scope: { handler: '=handler' },
   template: '<ng-include src="\'/ajax/\' + handler"></ng-include>'    
}
});

As workaround i used another approach that works. But i would prefer the initial way by using the templateUrl function as i e.g. want to check if "handler" is a valid value.

Try handler="cell.handler" without curly brackets.

link
– link

2014-05-13 12:59:40 +00:00
Commented May 13, 2014 at 12:59 — link
– link, Commented May 13, 2014 at 12:59
Already tried, does not work. Still the same literal value.

docsynder
– docsynder

2014-05-13 13:00:53 +00:00
Commented May 13, 2014 at 13:00 — docsynder
– docsynder, Commented May 13, 2014 at 13:00

jvrdelafuente · Accepted Answer · 2014-05-13 13:07:07Z

2

I think that this alternative can work:

myapp.directive('cellElement', function() {
  return {
    restrict: 'E',       
    template: '<div data-ng-include="templateUrl"></div>',
    link: function ($scope, iElement, attr) {
        $scope.templateUrl= $scope[attr.handler];
    }

 }

And you have to cosume without backets:

<p ng:repeat="cell in field.Cells">
   <cell-element handler="cell.handler"/>
   <!-- cell.handler is e.g. "User" -->
</p>

answered May 13, 2014 at 13:07

jvrdelafuente

2,00215 silver badges23 bronze badges

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

Comments

link · Accepted Answer · 2014-05-13 13:04:39Z

0

The thing is that probably the template is not compiled, so the value you want is not yet interpolated. If you tried to retrieve it in the link function, it would work.

edited May 13, 2014 at 13:04

answered May 13, 2014 at 12:58

link

1,6861 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS Dynamic TemplateUrl Value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related