AngularJS 預(yù)定義的 NgModelController

在前面講 conroller 參數(shù)的時(shí)候，提到過可以為指令定義一個(gè) conroller 。官方的實(shí)現(xiàn)中，有很多已定義的指令，這些指令當(dāng)中，有兩個(gè)已定義的 conroller ，它們是 NgModelController 和 FormController ，對(duì)應(yīng) ng-model 和 form 這兩個(gè)指令（可以參照前面的“表單控件”一章）。

在使用中，除了可以通過 $scope 來取得它們的引用之外，也可以在自定義指令中通過 require 參數(shù)直接引用，這樣就可以在 link 函數(shù)中使用 controller 去實(shí)現(xiàn)一些功能。

先看 NgModelController 。這東西的作用有兩個(gè)，一是控制 ViewValue 與 ModelValue 之間的轉(zhuǎn)換關(guān)系（你可以實(shí)現(xiàn)看到的是一個(gè)值，但是存到變量里變成了另外一個(gè)值），二是與 FormController 配合做數(shù)據(jù)校驗(yàn)的相關(guān)邏輯。

先看兩個(gè)應(yīng)該是最有用的屬性：

$formatters 是一個(gè)由函數(shù)組成的列表，串行執(zhí)行，作用是把變量值變成顯示的值。

$parsers 與上面的方向相反，把顯示的值變成變量值。

假設(shè)我們?cè)谧兞恐幸４嬉粋€(gè)列表的類型，但是顯示的東西只能是字符串，所以這兩者之間需要一個(gè)轉(zhuǎn)換：

<div ng-controller="TestCtrl">
  <input type="text" ng-model="a" test />
  <button ng-click="show(a)">查看</button>
</div>

var app = angular.module('Demo', [], angular.noop);

app.directive('test', function(){
  var link = function($scope, $element, $attrs, $ctrl){

    $ctrl.$formatters.push(function(value){
      return value.join(',');
    });

    $ctrl.$parsers.push(function(value){
      return value.split(',');
    });
  }

  return {compile: function(){return link},
          require: 'ngModel',
          restrict: 'A'}
});

app.controller('TestCtrl', function($scope){
  $scope.a = [];
  //$scope.a = [1,2,3];
  $scope.show = function(v){
    console.log(v);
  }
});

上面在定義 test 這個(gè)指令， require 參數(shù)指定了 ngModel 。同時(shí)因?yàn)?DOM 結(jié)構(gòu)， ng-model 是存在的。于是， link 函數(shù)中就可以獲取到一個(gè) NgModelController 的實(shí)例，即代碼中的 $ctrl 。

我們添加了需要的過濾函數(shù)：

• 從變量( ModelValue )到顯示值( ViewValue )的過程， $formatters 屬性，把一個(gè)列表變成一個(gè)字符串。
• 從顯示值到變量的過程， $parsers 屬性，把一個(gè)字符串變成一個(gè)列表。

對(duì)于顯示值和變量，還有其它的 API ，這里就不細(xì)說了。

另一部分，是關(guān)于數(shù)據(jù)校驗(yàn)的，放到下一章同 FormController 一起討論。