你能解释为什么以下指令不起作用？
attrs.ngMindirective似乎在链接函数内未定义。
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}
];
});
您应该使用attrs。$观察具有实际价值。
另一种方法是将此值传递给指令的范围，并将其视为监视。
这两种方法都显示在这里(live example)：
var app = angular.module('myApp',attrs) {
attrs.$observe('ngMydirective',function(value) {
if (parseInt(value,10) < 18) {
element.html('child');
}
});
}
};
});
app.directive('ngMydirective2',scope: { ngMydirective2: '@' },attrs) {
scope.$watch('ngMydirective2',function(value) {
console.log(value);
if (parseInt(value,10) < 18) {
element.html('child');
}
});
}
};
});
app.controller('MyCtrl',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>