我有下面提到的用于检测元素点击事件的自定义指令。
指令
.directive('myDir', [
'$document', function ($document) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
scope.IsWizardOpen = false;
element.on('click', function (e) {
scope.$apply(function () {
scope.IsWizardOpen = true;
});
e.stopPropagation(); //stop event from bubbling up to document object
});
}
};
}]);
我试图观察控制器内IsWizardOpen
属性的变化,如下所示。但它不起作用?单击元素(即IsWizardOpen
)后,true
的值已更改。那么您能告诉我问题在哪里吗?提前致谢。
控制器
$scope.$watch('IsWizardOpen', function () {
if ($scope.IsWizardOpen) {
//my task
}
});
HTML
<div my-dir>
</div>
答案 0 :(得分:1)
因此,原始值在被分配时绑定到子范围,因此您需要有一个包装它的对象。要深入挖掘,请阅读this。
我做了一些小改动,基本上我在控制器中创建了一个包装器对象,然后你的指令更新了它:
<强>控制器:强>
function MyCtrl($scope) {
$scope.wrapper = {};
$scope.$watch(function () {
return $scope.wrapper.IsWizardOpen;
}, function (newVal, oldVal) {
if (newVal) {
alert('watch works');
}
});
}
<强>指令:强>
myApp.directive('myDir', [
'$document', function ($document) {
return {
restrict: 'A',
scope: true,
template: '<div>Click Me!</div>',
link: function (scope, element, attrs) {
scope.wrapper.IsWizardOpen = false;
element.on('click', function (e) {
scope.wrapper.IsWizardOpen = true;
scope.$apply();
e.stopPropagation(); //stop event from bubbling up to document object
});
}
};
}]);