我的代码很简单:
.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 等表达式......
任何提示或帮助表示赞赏, 谢谢
最佳答案
在这种情况下您不能使用 $observe
,因为它观察一个内插属性。
( 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
属性。
关于javascript - AngularJS 观察指令属性表达式,动态继承作用域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28830489/