我在Angular 1.x项目中有一个场景,我需要在指令中查看控制器表单,以执行表单$ dirty check。一旦页面上的表单变脏,我就需要在注入的服务中设置一个标志。
以下是一般指令代码:
var directiveObject = {
restrict: 'A',
require: '^form',
link: linkerFn,
scope: {
ngConfirm: '&unsavedCallback'
}
};
return directiveObject;
function linkerFn(scope, element, attrs, formCtrl) {
...
scope.$watch('formCtrl.$dirty', function(oldVal, newVal) {
console.log('form property is being watched');
}, true);
...
}
以上只是在初始化期间进入手表,所以我尝试了其他方法,结果相同:
观察范围。$ parent [formName]。$ dirty(在这种情况下,我在attrs中传递formName并将其设置为本地var formName = attrs.formName)
观看element.controller()[formName](与上面的结果相同)
我查看了有关该问题的其他SO帖子,并尝试了列出的解决方案。它似乎应该工作,但不知何故,表单引用(表单属性引用)超出了指令的范围,因此没有被监视。
任何建议都将不胜感激。 谢谢。
答案 0 :(得分:3)
我不知道为什么手表不起作用,但作为传递整个表单的替代方法,您可以简单地将$dirty
标志传递给指令。那就是:
.directive('formWatcher', function() {
restrict: 'A',
scope: {
ngConfirm: '&unsavedCallback', // <-- not sure what you're doing with this
isDirty: '='
},
link: function(scope, element, attrs) {
scope.watch('isDirty', function(newValue, oldValue) {
console.log('was: ', oldValue);
console.log('is: ', newValue);
});
}
})
使用指令:
<form name="theForm" form-watcher is-dirty="theForm.$dirty">
[...]
</form>