How to get attribute value in template in angularjs custom directive?

Question

I am trying to get the attributes of "abc" defined as custom directive in angularjs:

<div abc="user">
    Access granted!
</div>

and then change the text inside div using custom directive:

.directive('abc', function() {
  var attr;
  return {
    link: function (scope, element, attributes) {
      attr = attributes.abc;
      console.log(attr);
    },
    template: "" + attr
  };
});

The result should be 'user' but it is undefined as attr is not defined at the time template is executed. So, any possible help how to tackle this issue?

Mathieu Bertin · Accepted Answer · 2015-05-21 14:14:07Z

5

You can't edit the template using a dynamic loaded from the attribute, you have to use the scope in order to update your template

template: '<div> {{abc}} </div>', // here it's scope.abc
link : function (scope, elem, attr) {
    scope.abc = attr.abc;
}

answered May 21, 2015 at 14:14

Mathieu Bertin

1,62411 silver badges11 bronze badges

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

2 Comments

root Over a year ago

thanks! and what to do for not returning any template depending on the logic of my function, so that the original "Access granted" can be visible?

Devner Over a year ago

That's really an amazing way to do it. Helped me solve my issue. Thanks a ton! BTW, could there be any other way to do it without having to assign it to the scope?

Ismapro · Accepted Answer · 2015-05-21 14:14:05Z

1

You have to extend your scope and add your attribute 'attr' in your scope

scope: {
   attr: '=abc'
}

and then from html you can define your attribute like so

<div abc attr="user">
    Access granted!
</div>

answered May 21, 2015 at 14:14

Ismapro

1306 bronze badges

3 Comments

root Over a year ago

here the console is showing 'attr' is not defined!!

Ismapro Over a year ago

I did a mistake try this one scope

Ismapro Over a year ago

try console.log(scope)

xavier hans · Accepted Answer · 2017-03-16 12:12:56Z

1

You can do it like that:

.directive('abc', function() {

  return {
    scope: {
       attr: '=abc'
    },
    link: function (scope) {
      console.log(scope.attr);
    },
    template: "" + attr
  };
});

edited Mar 16, 2017 at 12:12

answered May 21, 2015 at 14:04

xavier hans

843 bronze badges

3 Comments

root Over a year ago

here the console is showing 'attr' is not defined!!

Undefitied Over a year ago

may try scope.attr

xavier hans Over a year ago

Thanks, I forgot that

Collectives™ on Stack Overflow

How to get attribute value in template in angularjs custom directive?

3 Answers 3

2 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related