AngularJS：自定义指令使用动态属性值不内＆QUOT工作; NG重复＆QUOT; [英] AngularJS: Custom directive using dynamic attribute value doesn't work inside "ng-repeat"
本文介绍了AngularJS：自定义指令使用动态属性值不内＆QUOT工作; NG重复＆QUOT;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您能解释一下为什么请把以下指令不起作用？
attrs.ngMydirective 似乎是未定义链接函数内。
这里活生生的例子。
HTML
＆LT;机身NG控制器=MyCtrl＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=人的人＆GT;
{{person.name}}
＆LT;跨度NG-mydirective ={{person.age}}＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; /身体GT;
JS：
VAR应用= angular.module（'对myApp'，[]）;app.directive（'ngMydirective'，函数（）{
返回{
更换：真实，
链接：功能（范围，元素，ATTRS）{
如果（parseInt函数（attrs.ngMydirective，10）下; 18）{
element.html（'孩子'）;
}
}
};
}）;app.controller（'MyCtrl'，函数（$范围）{
$ scope.people = [
{名称：'约翰'，年龄：33}，
{名：米歇尔，年龄：5}
];
}）;
解决方案
您应该使用 ATTRS。$观察有实际价值。
另一种方法是将该值传递给指令的范围和 $观看了。
这两种方法都在这里显示（活生生的例子）：
VAR应用= angular.module（'对myApp'，[]）;app.directive（'ngMydirective'，函数（）{
返回{
更换：真实，
链接：功能（范围，元素，ATTRS）{
ATTRS。观察$（'ngMydirective'，功能（价值）{
如果（parseInt函数（价值10）LT; 18）{
element.html（'孩子'）;
}
}）;
}
};
}）;
app.directive（'ngMydirective2'，函数（）{
返回{
更换：真实，
适用范围：{ngMydirective2：@}，
链接：功能（范围，元素，ATTRS）{
范围。$腕表（'ngMydirective2'，功能（价值）{
的console.log（值）;
如果（parseInt函数（价值10）LT; 18）{
element.html（'孩子'）;
}
}）;
}
};
}）;app.controller（'MyCtrl'，函数（$范围）{
$ scope.people = [
{名称：'约翰'，年龄：33}，
{名：米歇尔，年龄：5}
];
}）;
＆LT;机身NG控制器=MyCtrl＆GT; ＆LT; UL＆GT;
＆LT;李NG重复=人的人＆GT;
{{person.name}}
＆LT;跨度NG-mydirective ={{person.age}}＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT;李NG重复=人的人＆GT;
{{person.name}}
＆LT;跨度NG-mydirective2 ={{person.age}}＆GT;＆LT; / SPAN＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; /身体GT;
Could you explain please why the following directive doesn't work?
attrs.ngMydirective seems to be undefined 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}
];
});
解决方案
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>
这篇关于AngularJS：自定义指令使用动态属性值不内＆QUOT工作; NG重复＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
