AngularJs 指令directive之require

在自定義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(){  

    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;  

        }  

      });  

  };  

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() {  

        if (float_regexp.test(viewvalue)) {  

          ctrl.$setvalidity('float', true);  

          return parsefloat(viewvalue.replace(',', '.'));  

          ctrl.$setvalidity('float', false);