AngularJs 指令directive之require

controller的用法分爲兩種情形，一種是require自定義的controller，因爲自定義controller中的屬性方法都由本身編 寫，使用起來比較簡單；另外一種方法則是require AngularJS內建的指令，其中大部分時間須要require的都是ngModel這個指令。

在自定義Angular指令時，其中有一個叫作require的字段，這個字段的做用是用於指令之間的相互交流。舉個簡單的例子，假如咱們如今須要編寫兩 個指令，在linking函數中有不少重合的方法，爲了不重複本身（著名的DRY原則），咱們能夠將這個重複的方法寫在第三個指令的 controller中，而後在另外兩個須要的指令中require這個擁有controller字段的指令，最後經過linking函數的第四個參數就能夠引用這些重合的方法。代碼的結構大體以下：

var app = angular.modeule('myapp',[]);

app.directive('common',function(){
    return {
    ...
    controller: function($scope){
        this.method1 = function(){
        };
        this.method2 = function(){
        };
    },
    ...
    }
});

app.directive('d1',function(){
    return {
    ...
    require: '?^common',
    link: function(scope,elem,attrs,common){
        scope.method1 = common.method1;
        ..
        },
    ...
    }
});

固然，上面例子只是指令中controller用法的一種。雖然通常來講，使用controller字段的機會不是不少，可是想要寫好AngularJS的指令，這是必需要掌握的一點。

 

引用內置指令

angular.module('myApp')
.directive('spoint', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      var fibonacci = [1, 2, 3, 5, 8, 13, 20, 40, 80];
      ctrl.$parsers.unshift(function(viewValue) {
        if (fibonacci.indexOf(parseInt(viewValue)) >= 0) {
          ctrl.$setValidity('fibonacci', true);
          return viewValue;
        } else {
          ctrl.$setValidity('fibonacci', false);
          return undefined;
        }
      });
    }
  };
});

這裏值得注意的是directive裏link方法的第四個參數，咱們在require裏定義了ngModel 因此這裏它是一個NgModelController

NgModelController是用來爲ng-model提供了一組API。經過他咱們能夠他來肯定ngModel的 值是不是合法的。 咱們這裏只介紹其中和表單驗證有關的幾個方法和屬性。

上面的例子中咱們用到了$parsers這個屬性和$setValidity()這個方法。 $parsers裏保存了一組function， 每當DOM裏數據變化的時候， 這組function會被一次調用。這裏給了咱們機會在用戶修改了DOM裏值的時候， 去對新輸入的值作校驗。

 

「智能浮點(smart-float)」指令。它能把"1.2"或者"1,2"都轉化爲合法的浮點數"1.2"。注意，這裏咱們不能使用「數字輸入類型」，由於HTML5的瀏覽器不容許用戶輸入像"1,2"這樣的非法值。

html

<input type="text" ng-model="length" name="length" smart-float />
{{length}}<br />
<span ng-show="form.length.$error.float">This is not a valid float number!</span>

 js

var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (FLOAT_REGEXP.test(viewValue)) {
          ctrl.$setValidity('float', true);
          return parseFloat(viewValue.replace(',', '.'));
        } else {
          ctrl.$setValidity('float', false);
          return undefined;
        }
      });
    }
  };
});