Access attrs in AngularJS directive templateUrl

Question

I have a problem as I don't understand AngularJS directives 100% yet. I have a directive like so,

in my HTML:

<div my-directive="Hello World"></div>

in my Directive JS file:

.directive('myDirective', [function ( ) {
        return {
            restrict: 'A',
            priority: 100,
            templateUrl: 'views/templates/my-directive.html',
            link: function (scope, element, attrs) {
                // I wish to pass attrs.myDirective to the templateUrl
            }
        };
    }]);

and in my templateUrl 'views/templates/my-directive.html':

<h1> {{ attrs.myDirective }} </h1>

Obviously this does work, my directive value is passed to the link function but not to the templateUrl, how can I output the value in my templateUrl? Silly question I know but I'm not sure what the best way to implement this is?

squiroid · Accepted Answer · 2015-04-01 07:09:19Z

1

You can simply assigned this value to scope variable.

  scope.myDirective=attrs.myDirective

app.directive('myDirective', [function ( ) {
        return {
            restrict: 'A',
            priority: 100,
            templateUrl: 'my-directive.html',
            link: function (scope, element, attrs) {
              scope.myDirective=attrs.myDirective
                // I wish to pass attrs.myDirective to the templateUrl
            }
        };
    }]);

Plunker

answered Apr 1, 2015 at 7:09

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

2 Comments

Mark Sandman Over a year ago

I originally did this and it worked, however I was unsure if I was to use the compile feature to pass the attr this to the templateUrl

squiroid Over a year ago

there is no need of compile here untill you will have dynamic tempalte :)

Collectives™ on Stack Overflow

Access attrs in AngularJS directive templateUrl

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related