Evaluate attrs in templateUrl

Question

I need to read the value of an attr in the templateUrl function of my directive.

<my-dirc type="type"></my-dirc>

my-dirc :

return {
scope : {
  type : =
},
templateUrl: function(elem, attrs) {
  console.log(attrs.type);
}
}

however, the console return "type" only and not the value of type. i have also tried doing

<my-dirc type="{{type}}"></my-dirc>
my-dirc :

    return {
    scope : {
      type : @
    },
    templateUrl: function(elem, attrs) {
      console.log(attrs.type);
    }
    }

Now the console.log gives me {{type}}.

How can I get the value of type?

on the basis of type ill return a string which would be the path to the required template. — Bhumi Singhal, Feb 22 '16 at 09:40
Do you want to do a one time change of the template? Or do you want the template to change every time the attribute value changes? — georgeawg, Feb 28 '16 at 19:43

Pankaj Parkar · Answer 1 · 2016-02-22T09:56:51.547

0

You can't get access to scope of the parent, here inside templatUrl function. Because template/templateUrl function gets evaluated first before creating controller scope, that's the reason why you are getting raw value inside your attribute. If you have pass hardcoded value inside attribute then only you can retrieve that inside function.

This issue can only be solved using ng-include

templateUrl: function(elem, attrs) {
   return '<div ng-include="type? \'template\'+type+\'.html\': \'\'"></div>`
}

edited Feb 22 '16 at 09:56

answered Feb 22 '16 at 09:51

Pankaj Parkar

134,766
23
234
299

Cant use ng-include... since this will add a level of scope heirarchy – Bhumi Singhal Feb 22 '16 at 10:04
is there way to use $interpolate or anything? – Bhumi Singhal Feb 22 '16 at 10:05
@BhumiSinghal you can do that, it needs scope..because `scope` isn't available at instance.. `templateUrl` is first thing to get evaluate by compiler.. you could find similar [answer here](http://stackoverflow.com/a/32410273/2435473) – Pankaj Parkar Feb 22 '16 at 10:07
@BhumiSinghal may why don't you follow `Dot rule` while defining models – Pankaj Parkar Feb 22 '16 at 10:19
legacy code .. cant change it all. Compile function can help ? – Bhumi Singhal Feb 22 '16 at 10:24
or if we can use elem to get the scope using angular.element – Bhumi Singhal Feb 22 '16 at 10:24
No then go for custom directive which will work same as like ng-include without creating a child scope – Pankaj Parkar Feb 22 '16 at 10:26
thinking over the usage of custom directive – Bhumi Singhal Feb 29 '16 at 05:44
So where you are stubled now? – Pankaj Parkar Feb 29 '16 at 05:58

ojus kulkarni · Answer 2 · 2016-02-22T10:00:48.257

-2

You dont need to write type in expression
Try this

<my-dirc type="type"></my-dirc>

DIR :

return {
  scope : {
  type : '=type'
},
  templateUrl: '.html'

  'link' : function(elem, attrs) {
  attrs.$observe('type', function (obs) {
        console.log(obs);
  })
  } 
}

edited Feb 22 '16 at 10:00

answered Feb 22 '16 at 09:40

ojus kulkarni

1,877
3
25
41

@PankajParkar you should definately go through [this](http://stackoverflow.com/a/14907826/4286411) – ojus kulkarni Feb 22 '16 at 09:45
no man..`templateUrl: '.html'` will fail..and this obivious thing that we can get `type` value inside `link` function.. but there is no need to have `$observe` on it then.. because we are accepting it using `isolated scope` already.. Though this is not what OP wants & it wouldn't solve problem which has been faced by OP – Pankaj Parkar Feb 22 '16 at 10:04
2

true.. this will not help – Bhumi Singhal Feb 22 '16 at 10:05

Evaluate attrs in templateUrl

2 Answers2