Question

考虑这个可运行的示例：http://plnkr.co/edit/1BfO7KkHeMD3EpsULNGP?p=preview

<html ng-app='app'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js"></script>
<script>
angular.module('app', [])
.directive('pwCheck', [function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var firstPassword = '#' + attrs.pwCheck; 
            elem.add(firstPassword).on('keyup', function () { 
                  var v = elem.val()===$(firstPassword).val();
                    console.log(v);
                    ctrl.$setValidity('pwcheck', v); 
            });
        }
    }
}]);
</script> 
<form name="form">
<input type="text" id="pw1" name="pw1" ng-model="pw1Model">
<input type="text" name="pw2" pw-check="pw1" ng-model="pw2Model">
Valid:  {{form.pw2.$valid}}
<pre>{{form.pw2 |json}}</pre>
</form>

在其中一个字段中写入一个字符，并看到在写入第二个字符之前不会更新有效性。如果您测试复制/粘贴等，则有效性不正确。但会记录正确的值v。为什么模型没有正确更改？

Answer 1

将$setValidity换入$ timeout

$timeout(function() {
   ctrl.$setValidity('pwcheck', v);
});

http://plnkr.co/edit/OSuHBgtReDoCGWi03Cc8?p=preview

我认为与角度原生$setValidity指令的input调用存在一些冲突。将此调用包装到$timeout可以避免此冲突。

AngularJS自定义验证$ setValidity

1 个答案: