validator指令實現

最近閱讀項目代碼，學習前輩編寫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指向window

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等基本方法。