首页 > 其他 > 详细

validator指令实现

时间:2016-07-12 21:15:44      阅读:201      评论:0      收藏:0      [点我收藏+]

最近阅读项目代码,学习前辈编写angular指令的方式。不涉及关键的业务代码,所以应该没有保密性问题。希望通过写这篇博客明白validator指令是怎么实现的。

像这样使用:

技术分享

校验功能的实现依赖provider validator和若干directive. provider的结构是这样的:

.provider(‘validator‘, [function() {

  var validatorFn = function(){//....};

  validatorFn.prototype = {//...};

      var validator = new validatorFn();

  this.$get = function() {return validator;}

}]);

1. form-validator directive

这个指令主要功能:①绑定失焦校验, 执行doValidate;  ②当viewValue发生改变时移除错误样式 ③定义dovalidate函数

scope.$apply(scope[formName].$errors);//这是干嘛?

1)每一个directive实例要执行一次link. 

2)如果指令没有require ctrl又自己定义了ctrl, 则link中传入的是自己定义的ctrl.

3)form有长度, 是表单元素的数目。

4)watch数组的变化(引用自:http://anjianshi.net/post/yan-jiu-bi-ji/ng-watch):

技术分享

5)link中的this指向元素本身

6)scope[formName]:值为formController. scope[formName].$setPristine()——重置表单

7) formName.elementName.$viewValue, formName.elementName.$valid

2. form-submit指令:提交的时候执行dovalidate

3.datetimecheck: 

读取元素值:attr.ngModel

校验时间区间:if (时间错误) ctrl.$setValidity(validationName, false); 此时ctrl.$error中会有{validationName: true}

4. form-element

ng-repeat中的表单元素必须绑定form-element才能让校验生效,因为ng-repeat生成了新的scope, 在form-validator scope绑定的失焦校验无法适用。

form-validator中的scope是父scope, 而ng-repeat生成新的隔离scope.

 

综上, datetimechecker, required等指令自定义方法执行$setValidity(), form-submit时,以及元素失焦时(form-validator设置)会执行doValidate来读取ctrl.$error, 从而修改样式。

validator provider设置了默认rules, 开放setRules接口,以及removeError, showError等基本方法。

 

validator指令实现

原文:http://www.cnblogs.com/AngelaDuoduo/p/5661686.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!