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;
        }
      });
    }
  };
});