How to get attribute value of a custom tag in angularjs?

Question

I am trying to create a custom tag using angularJs. This tag has an attribute named data. data gets it value like this <skillviz data="{{user.info}}"></skillviz>. user.info is a JSON object. But when i try to access this data attribute in my directive definition, I get undefined. What is the correct way to do this ?

html code

<div id="info-box" ng-repeat="user in users | orderBy:orderProp">            
          <div id="skill-block">
            <skillviz height="50" data="{{user.skills}}"></skillviz>
          </div>
      </div>

users is a JSON type object, declared in the controller. So basically users will be a list(array) of

{"first_name": "Tifanny",

        "last_name": "Maxwell",
        "skills": [
            {"name": "Java", "score": 4.8, "color" : "red"},
            {"name": "C++", "score": 4.0, "color" : "blue"},
        ]
    },

services.js

angular.module('yott', []).directive('skillviz', function () {
return {
    restrict: 'E',
    link: function (scope, element, attrs) {
        element.html("<script>alert(" + attrs['data'] + ")</script>");
        });
    }
  }
});

alert box pops up saying undefined

I just changed element.html("<script>alert(" + attrs['data'] + ")</script>"); to alert(attrs['data']);, then it worked for me. plnkr.co/k7VCGMpYISBkm5iOtTjp — Ye Liu
– Ye Liu, Commented Jun 2, 2013 at 3:19

Juampy NR · Accepted Answer · 2013-07-03 17:07:15Z

20

Let's say you have the following markup:

<div ng-controller="MyController" data-id="someCustomValue">
</div>

Now in your controller you can do the following to access data-id:

app.controller('MyController', function ($scope, $attrs) {
  console.log($attrs.id); // Prints 'someCustomValue'
});

answered Jul 3, 2013 at 17:07

Juampy NR

2,8281 gold badge28 silver badges21 bronze badges

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

1 Comment

user1099258 Over a year ago

this is invalid

winkerVSbecks · Accepted Answer · 2013-06-02 16:21:49Z

4

Use $observe to observe changes to the attribute:

attrs.$observe('data', function(value) {
  console.log('data has changed value to ' + value);
});

And $set to change value:

attrs.$set('data', 'new value');

Alternatively you can pass/link it into the directive scope using @ (bind a local scope), & (provides a way to execute an expression in the context of the parent scope) or = (set up bi-directional binding) – explained here

angular.module('yott', []).directive('skillviz', function () {
    return {
        restrict: 'E',
        scope { data: "=data" },
        link: function (scope, element, attrs) {
            element.html("<script>alert(" +scope.data + ")</script>");
            });
        }
      }
    });

edited Jun 2, 2013 at 16:21

answered Jun 2, 2013 at 2:53

winkerVSbecks

1,1731 gold badge10 silver badges25 bronze badges

2 Comments

Ye Liu Over a year ago

In addition, it's all right to access the attribute value by attrs['data'] or attrs.data. See the examples.

Ye Liu Over a year ago

There should be a semicolon after scope, and = data should be =data, or simply =.

Collectives™ on Stack Overflow

How to get attribute value of a custom tag in angularjs?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related