我想为 ionItem 创建一个属性指令,并且希望它观察自己的值:
<ion-item ng-repeat="item in items" my-dir="{{data.watchedValue}}">….</ion-item>
我在指令中创建正确的监视语句时遇到问题。监视在初始 View 渲染期间仅执行一次。此后,当 data.watchedValue
更改时,不会调用它。
该指令的具体之处在于它是 ionItem
指令的子项。
我尝试了多种方法(请参阅 my-dir 源代码中的注释),但没有一个有效。
指令:
.directive('myDir', function() {
return {
restrict: 'A',
require: '^ionItem',
link: function(scope, element, attr, itemCtrl) {
console.log('my-dir initial value: ' + attr.myDir);
if (angular.isDefined(attr.myDir)) {
// scope.$watch("(" + attr.myDir + " === \"true\")", function(value) {
// scope.$watch('!!(' + attr.myDir + ')', function(value) {
scope.$watch(attr.myDir, function(value) {
console.log('my-dir watch new value: ' + value);
});
}
} // link
}; // return
}) // directive
简化的指令用法:
<button class="button" ng-click="data.watchedValue = !data.watchedValue">
Change Value
</button>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items" my-dir="{{data.watchedValue}}">
Item {{ item.id }}. Watched property: {{ data.watchedValue }}
</ion-item>
</ion-list>
</ion-content>
Code Pen有完整的例子。按更改值
按钮...更改值。
在初始显示后观察控制台是否有任何日志。
最佳答案
您应该只是将作用域变量名称传递给指令attribute
<ion-item ng-repeat="item in items" my-dir="data.watchedValue">
Item {{ item.id }}. Watched property: {{ data.watchedValue }}
</ion-item>
或
您可以使用 attrs.$observe
而不是 $scope.$watch
,它基本上会监视 {{}}
在属性上指定的插值。
If
data.watchedValue
has object then I'd highly recommend to go for 1st approach.
关于javascript - ionic ,AngularJs : Directive attribute $watch stops working after view is rendered,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39384314/