Question

我正在使用输入类型文本的模板创建一个用于验证的角度指令，我正在绑定一个关键事件，其中我正在验证输入字段，我只是使用ng-show来打印错误消息，之后打印两个关键事件发生，但它在控制台中显示确切的错误，请帮我解决这个问题，粘贴我的plunkrlink 我的代码如下

var app = angular.module('myApp',[]);

app.directive('markdownEditor', function () {
    return {
        restrict: 'EA',
        scope: {
            ngModel: "="
        },
        require:'ngModel', 
        template:       
   '<input type="text" ng-model="foo" required/>',     
link:function(scope,ele,attr,ctrl){

      ele.bind("keyup",function(){

var reg=/[0-9!@#$%^&*_(=+^\(*\)\-\{:<>?|;',\/\[\]\"\})]/;

var y=scope.foo;
console.log(y);
if(reg.test(y)){
  ctrl.$setValidity('c',false);
console.debug("not ok");
}
else{
ctrl.$setValidity('c',true);
console.debug("ok");
}

      });
}
} ; 
});

app.controller('DemoCtrl', function ($scope) {
});

Answer 1

您正在更新角度来自Angular的外部世界。对于那些变化，Angular不会运行摘要周期。在这种情况下，您正在更新自定义事件中的范围变量，这不会影响Angular摘要系统在UI上更新的内容，从而导致摘要周期不会被解雇。

您需要手动启动摘要周期以更新绑定。

scope.$apply()

最好你也可以在这里使用需要regx值的ng-pattern指令，当你的regx不满意时，它会向该元素添加ng-invalid-pattern类。在此基础上你可以添加CSS规则。

同时@paul trone建议使用$validators这也是一个很好的方法。

Demo Plunkr

Answer 2

为什么不尝试使用内置的ngModelController $ validators管道进行验证，它会自动更新ng-valid- / ng-invalid-类：

...
// in the directive link function 
ctrl.$validators.c = function(input) {
  return reg.test(input);
}

角度自定义验证指令不会在keyup事件上显示错误

2 个答案: