前端开发

复制代码 代码如下:angular.module('myApp', ['ngMessages']);
怎么用？

现在我们学习一下，它的用法，Code如下：

  
    
    
    
    
    

    
  
  
    

      

        

          

            用户名
          
          

            
            

            $error：{{myForm.name.$error}}
            

            

              
必填项
              
字符太短小于3
              
字符太长大于20
            
 
          
        
      
    
  

效果如下：

可以看出，其实ng是通过$error来监视模型的变化，因为$error中包含了错误的详细信息，同时，如果我们的应用场景中如果同时，有好几处错误，那么，上面代码按照ng-message的顺序只会显示一条错误信息，如果我们需要全部显示出来只需要添加 ng-messages-multiple

必填项
邮件格式不对
字符太短小于3
  
字符太长大于20
 

效果如下：

怎么复用？

我们的验证信息在一个项目中大多是通用性很高的（对于样式，描述等都有高度的统一性），因此我们这里也会考虑到复用，ng中同样提供了解决方案

就是将其作为模板，指定请求路径由ng自动添加。这里再介绍一个指令 ng-messages-include

我们将上面的验证信息保存到一个独立的html静态页面中，然后使用ng-messages-include指定请求路径即可。

Code:

error.html

必填项
邮件格式不对
字符太短小于3
字符太长大于20

效果如下：

当然，模板可能在特殊的时期某些字段错误提示不能满足你的要求，你可以添加自定义的提示如下：

自定义验证(指令)涉及到的细节知识点很多，如果简单地为了用而用，可能写得出功能，但是代码丑陋，太菜了，还需要花个把月方能弄懂点皮毛，这部分暂告一段落，等彻底明白了，在大家分享，大家亦可以结合进行学习。