current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

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

share|improve this question
 
I just changed element.html("<script>alert(" + attrs['data'] + ")</script>"); to alert(attrs['data']);, then it worked for me. plnkr.co/k7VCGMpYISBkm5iOtTjp –  Ye Liu Jun 2 '13 at 3:19
add comment

2 Answers

up vote 2 down vote accepted

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>");
            });
        }
      }
    });
share|improve this answer
2  
In addition, it's all right to access the attribute value by attrs['data'] or attrs.data. See the examples. –  Ye Liu Jun 2 '13 at 3:34
1  
There should be a semicolon after scope, and = data should be =data, or simply =. –  Ye Liu Jun 2 '13 at 3:36
add comment
up vote 2 down vote

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'
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.