我的代码很简单:
.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
$timeout(function () {
$scope.x = 5;
}, 2000);
}])
.directive('ngHey', ['$parse', function ($parse) {
return {
'restrict': 'A',
'scope': true,
'link': function($scope, el, atr) {
var go = function () {
if ($parse(atr.ngHey)()) {
alert('oiiiiiii');
}
};
atr.$observe('ngHey', function (val) {
if (val) {
go();
}
});
}
};
}]);
// view.html
<div ng-controller="Ctrl">
<span ng-hey="x > 3"></span>
</div>
我希望能够在指令表达式发生变化时触发,当它变为真或假时,但是此时警报永远不会发生......
只有在我执行以下操作时才有效:
<div ng-controller="Ctrl">
<span ng-hey="{{x > 3}}"></span>
</div>
这不是我想要的,我希望指令执行表达式,如ng-if或ng-hide等...
任何提示或帮助表示赞赏, 感谢
答案 0 :(得分:3)
在这种情况下,您无法使用$observe
,因为Observes an interpolated attribute.
(documentation)。在这种情况下,您可以在范围内使用$watch
,如下所示:
.directive('ngHey', ['$parse',
function($parse) {
return {
scope: true,
link: function($scope, el, atr) {
var go = function(value) {
if (value) {
alert('oiiiiiii');
}
};
$scope.$watch(atr.ngHey, function(val) {
if (val) {
go(val);
}
});
}
};
}
]);
演示: http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview
UPD。根据OP的评论,更新后的指令如下:
.directive('ngHey', ['$parse',
function($parse) {
return {
scope:{ngHey: '='},
link: function($scope, el, atr) {
var go = function(value) {
if ($scope.ngHey) {
alert('oiiiiiii');
}
};
$scope.$watch('ngHey', function(val) {
if (val) {
go();
}
});
}
};
}
]);
注意,在这种情况下如何使用$scope.ngHey
,不需要$eval
属性。
答案 1 :(得分:1)
当$timeout
稍后设置x的值时,指令检查属性内的条件总是返回false
。因此,只要$watch
更改,就go()
使用x
检查条件。
var myApp = angular.module('myApp',[]);
myApp.directive('ngHey', function () {
return {
'restrict': 'A',
'scope': true,
'link': function($scope, el, attr) {
var go = function () {
if ($scope.$eval(attr.ngHey)) {
alert('oiiiiiii');
}
};
$scope.$watch('x', function (val) {
if (val) {
go();
}
});
}
};
});
而不是$parse
使用$scope.$eval
而不是$observe
使用$watch
。