AngularJS: Custom directive using dynamic attribute value doesn't work inside "ng-repeat"
20,613
You should use attrs.$observe
to have actual value.
Another approach is to pass this value to directive's scope and $watch
it.
Both approaches are shown here (live example):
var app = angular.module('myApp', []);
app.directive('ngMydirective', function() {
return {
replace: true,
link: function(scope, element, attrs) {
attrs.$observe('ngMydirective', function(value) {
if (parseInt(value, 10) < 18) {
element.html('child');
}
});
}
};
});
app.directive('ngMydirective2', function() {
return {
replace: true,
scope: { ngMydirective2: '@' },
link: function(scope, element, attrs) {
scope.$watch('ngMydirective2', function(value) {
console.log(value);
if (parseInt(value, 10) < 18) {
element.html('child');
}
});
}
};
});
app.controller('MyCtrl', function($scope) {
$scope.people = [
{name: 'John', age: 33},
{name: 'Michelle', age: 5}
];
});
<body ng-controller="MyCtrl">
<ul>
<li ng-repeat="person in people">
{{ person.name }}
<span ng-mydirective="{{ person.age }}"></span>
</li>
<li ng-repeat="person in people">
{{ person.name }}
<span ng-mydirective2="{{ person.age }}"></span>
</li>
</ul>
</body>
Author by
Misha Moroshko
I build products that make humans happier. Previously Front End engineer at Facebook. Now, reimagining live experiences at https://muso.live
Updated on July 05, 2022Comments
-
Misha Moroshko almost 2 years
Could you explain please why the following directive doesn't work?
attrs.ngMydirective
seems to beundefined
inside the linking function.HTML:
<body ng-controller="MyCtrl"> <ul> <li ng-repeat="person in people"> {{ person.name }} <span ng-mydirective="{{ person.age }}"></span> </li> </ul> </body>
JS:
var app = angular.module('myApp', []); app.directive('ngMydirective', function() { return { replace: true, link: function(scope, element, attrs) { if (parseInt(attrs.ngMydirective, 10) < 18) { element.html('child'); } } }; }); app.controller('MyCtrl', function($scope) { $scope.people = [ {name: 'John', age: 33}, {name: 'Michelle', age: 5} ]; });