angularjs - 无法在 Angular 1.x 中查看表单 $dirty(或 $pristine)值

Question

我在 Angular 1.x 项目中有一个场景，我需要在指令中观察 Controller 表单，以执行表单 $dirty 检查。一旦页面上的表单变脏，我需要在注入(inject)的服务中设置一个标志。

这是通用指令代码:

            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);               

          ...
        }

以上仅在初始化期间进入 watch ，因此我尝试了其他方法，结果相同:

观看 scope.$parent[formName].$dirty (在这种情况下，我在 attrs 中传递 formName 并将其设置为本地 var formName = attrs.formName)

观看 element.controller()[formName] (与上述结果相同)

我查看了有关该问题的其他 SO 帖子并尝试了列出的解决方案。看起来它应该可以工作，但不知何故，表单引用(表单属性引用)超出了指令的范围，因此不被监视。

任何意见，将不胜感激。
谢谢你。

Answer 1

我不知道为什么那个 watch 不工作，但作为传递整个表单的替代方法，你可以简单地传递 $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>