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?

Answer 1

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;
}

Answer 2

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>