javascript - 指令在字段上调用 ​​setValidity(false) 但字段有效性永远不会根据 View 而改变

Question

引用这个笨蛋:http://plnkr.co/edit/GzC9ufa1WJmKQ6Ad15v9?p=preview

我有一个指令运行测试，然后使用结果调用 $scope.form['myfield'].setValidity() 。但是，这不会反射(reflect)在 View 或 Controller 中。

总是设置false的简单示例:

app.directive('myDirective', function() {
  return {
    link: function(scope, elem, attrs) {
      elem.on('blur change', function() {
        console.log("start valid:" + scope.form[attrs.name].$valid);
        scope.form[attrs.name].$setValidity('myfield', false);
        console.log("end valid:" + scope.form[attrs.name].$valid);
      });
    }
  };
});

在我看来:

<input type="text" ng-model="myModel" name="myfield" my-directive/>

控制台日志记录确认，当指令中的事件首次触发时，该字段有效，然后在 setValidity 之后它变为 false。对于后续事件，在事件触发之前它是 false。但是，当我在 View 中打印出 {{form['myfield'].$valid}} 时，无论如何它仍然是 true 。

我想这可能是一个计时问题，当 setValidity(false) 在指令中运行时， View 已经检查过了。我该如何解决这个问题？

Answer 1

将代码包装在 $apply 中以触发摘要:

app.directive('myDirective', function() {
  return {
    link: function(scope, elem, attrs) {
      elem.on('blur change', function() {
        console.log("start valid:" + scope.form[attrs.name].$valid);
        scope.$apply(function() {
            scope.form[attrs.name].$setValidity('myfield', false);
            console.log("end valid:" + scope.form[attrs.name].$valid);
        });
      });
    }
  };
});