Question

背景

我正在尝试创建一个可以放在任何输入字段中的验证器指令。此指令应验证'ngModel'值，然后生成错误消息以在UI上显示。

我不想在输入字段周围使用ng-form，因为我注意到与在页面中使用大量ng-form元素（主要是在IE浏览器中）相关的严重性能影响。

我的用户界面

<!DOCTYPE html>
<html ng-app="app">
 <head>
   <script src="angular.min.js"></script>
   <script src="angular-messages.min.js"></script>
   <script src="ngmessages.js"></script>
 </head>
 <body>

 <form name="twitter">
   <input type='email' name="twitt" ng-model="message" twitter-input required/>
 </form>

 <script type="text/ng-template" id="generic-messages">
  <div ng-message="required">This field is required</div>
  <div ng-message="email">This is invalid email</div>
 </script>

 </body>

</html>

我的脚本代码（'ngmessages.js'）

angular.module("app",['ngMessages'])
.directive('twitterInput', function($compile) {
 return {
     require: 'ngModel',
     link: function(scope, element, attrs, ngModel) {

     function valueValdate(value){              

      if(ngModel.$error.required || ngModel.$error.email){
        var e = $compile('<div ng-messages="twitter.twitt.$error"><div ng-messages-include="generic-messages"></div></div>')(scope);       

        element.after(e);
      }     
    return value;
   }

   ngModel.$parsers.push(valueValdate);  
   ngModel.$formatters.push(valueValdate); 
  }

}; }）;

我的问题：

1）目前在代码中对$ error对象的引用是硬编码的（'twitter.twitt。$ error'）

 $compile('<div ng-messages="twitter.twitt.$error"><div ng-messages-include="generic-messages"></div></div>')(scope);

我不知道如何让它变得动态。

2）第一次加载页面时，没有显示验证错误。每次键入输入字段的值时，UI中都会显示多条错误消息...这是不正确的。

3） *动态验证输入字段ng-model值并在UI上显示错误消息的最佳方法是什么。我不想在我的ui代码中的任何位置使用'ng-form'或'form'名称，因为我不想将验证器附加到任何特定字段。我希望这一切都在指令层面完成。 *

如何在UI处验证输入字段ng-model值并显示错误消息，而不引用“ng-form”或“form”名称

0 个答案: