javascript - 当模型数据在 angularjs 的表单之外更改时，如何在观察者中正确检查表单有效性？

Question

我对 AngularJS 还是很陌生，我想我很难理解 $scope 的时间安排。在 Controller 中，我为一些绑定(bind)到各种表单元素的模型数据设置了一个观察者。观察者在数据更改时触发 ajax 请求，除非表单无效。我正在使用 myForm.$valid 检查表单有效性。然而，这一切都非常简单，除非在 Controller 而不是表单中更新模型数据。验证按预期运行，但 form.$valid 仍然具有以前的值，而不是更新数据应有的值。例如，如果表单之前有效，然后我删除绑定(bind)到所需输入的模型值，观察者将触发，因为模型数据已更改，但当我记录 myForm.$valid 的值时，它的值仍然为真，即使它应该是错误的。

所以我的问题是 A. 为什么会这样？但更重要的是 B. 处理我想要完成的事情的正确方法是什么？自定义指令有意义吗？

这是一个简化的例子。

HTML:

<div ng-controller="MyCtrl">
    <form name="myForm">
        <input type="text" name="myField" ng-model="myData" required>
        <button type="button" ng-click="myData=''">Delete</button>
    </form>

    <div>
        The watcher says the form is: <strong>{{ formStatus }}</strong>    
    </div>
</div>

Controller :

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.myData = 'abc';
    $scope.formStatus = '';

    $scope.$watch('myData', function(newVal, oldVal) {
        if (newVal != oldVal) {
            console.log("my data changed");
            console.log("my form valid = ", $scope.myForm.$valid);        
            $scope.formStatus = $scope.myForm.$valid ? 'Valid' : 'Invalid';
        }
    });
}]);

fiddle :http://jsfiddle.net/anpsince83/cK6cc/1/

Answer 1

自定义指令是正确的方法。由于一些原因，通常建议将 watch 放在指令中而不是 Controller 中。在高层次上，一个原因是 Angular 建议 Controller 是瘦的，并且只作为 View 和服务之间的粘合剂。但是你遇到了一个具体的、有趣的原因。

Controller 在 Angular 指令链接之前运行。因此您的 Controller 监视在 Angular 的 ngModelWatch() 为 myData 执行操作之前被添加到监视列表中。 ngModelWatch() 是 Angular 运行的地方 $formatters (回想一下，$formatters 是在模型发生更改时触发验证的地方)。

由于监视是按照它们被添加到监视列表的顺序执行的，因此您的 Controller $watch在验证之前执行由$formatters完成。

如果您将相同的 $watch 放入指令中，它将在 ngModelWatch() 被添加到监视列表后的链接期间被添加。因此，指令的 $watch 将在验证完成后执行。

这是 an updated fiddle您可以在其中查看 $formatters 和每个 $watch 的执行顺序。您会看到指令版本按预期运行 - 在 $formatters 之后运行。