AngularJS directive pass parameters through templateUrl function

Question

I'm trying to move my template from being in-line to it's own file. Everything was working before I changed from template to templateUrl

Glenn.directive('test', function($compile) {
    return {
        restrict: 'A',
        priority: 1000,
        terminal: true,
        templateUrl: function(tElement, tAttrs) {
            return ('test.html');
        },
        link: function(scope, element, attrs) {     
            attrs.$set('editable-text', 'content.' + attrs.edit + '.data');
            attrs.$set('edit', null);
            $compile(element)(scope);
        }
    }
});

test.html

{{ 'content.' + tAttrs.edit + '.data' }}

<button ng-click="' + tAttrs.edit + '_form'+ '.$show()" ng-hide="' + tAttrs.edit + '_form'+ '.$visible">edit</button>

Why isn't the tAttrs being passed to my template test.html?

Can you post JSFiddle it Plunker with your code? It's hard to tell what you're trying to do. — GFoley83
– GFoley83, Commented Jul 23, 2014 at 18:56
All I'm trying to do is pass an attribute value to my template. — Mitch
– Mitch, Commented Jul 23, 2014 at 19:31

miron · Accepted Answer · 2014-07-24 05:08:39Z

4

I never seen this that way, i always pass an string to the templateUrl property like

...
templateUrl: './foodirective.tmpl.html'
...

You could assign the attrs from your directive element in the linking function:

myApp.directive('fooDirective', function(){
  return{
    restrict: 'E',
    scope: true,
    templateUrl: './foodirective.tmpl.html',
    link: function(scope, elem, attrs){
      // do stuff
      scope.tAttrs = attrs;
    }
  }
})

I've prepared a plunk for you.

edited Jul 24, 2014 at 5:08

answered Jul 23, 2014 at 18:42

miron

1,4501 gold badge12 silver badges27 bronze badges

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

2 Comments

Mitch Over a year ago

I'm not sure why this doesn't work for me. I just get null returned on my template tAttrs.edit :(

miron Over a year ago

> All I'm trying to do is pass an attribute value to my template. That's exactly what I'm doing in my example, did you check the plunk?

Collectives™ on Stack Overflow

AngularJS directive pass parameters through templateUrl function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related