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
The AngularJS ng-value directive is used to set the value attribute of an input element, or a select element. It is mainly used on <radio> and <option> elements to set the bound values when these elements are selected. It is supported by <input> and <select> elements.
AngularJS Directives The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
"ng" stands for Next Generation, as Angular is the next generation of HTML .
Directives are markers on the DOM element which tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element with its children. Simple AngularJS allows extending HTML with new attributes called Directives.
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'
});
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>");
});
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With