### 18.10. 預定義的 NgModelController 在前面講 conroller 參數的時候，提到過可以為指令定義一個 conroller 。官方的實現中，有很多已定義的指令，這些指令當中，有兩個已定義的 conroller ，它們是 _NgModelController_ 和 _FormController_ ，對應 _ng-model_ 和 _form_ 這兩個指令（可以參照前面的“表單控件”一章）。 在使用中，除了可以通過 `$scope` 來取得它們的引用之外，也可以在自定義指令中通過 _require_ 參數直接引用，這樣就可以在 `link` 函數中使用 controller 去實現一些功能。 先看 _NgModelController_ 。這東西的作用有兩個，一是控制 `ViewValue` 與 `ModelValue` 之間的轉換關系（你可以實現看到的是一個值，但是存到變量里變成了另外一個值），二是與 _FormController_ 配合做數據校驗的相關邏輯。 先看兩個應該是最有用的屬性： _$formatters_ 是一個由函數組成的列表，串行執行，作用是把變量值變成顯示的值。_$parsers_ 與上面的方向相反，把顯示的值變成變量值。 假設我們在變量中要保存一個列表的類型，但是顯示的東西只能是字符串，所以這兩者之間需要一個轉換： <div ng-controller="TestCtrl"> <input type="text" ng-model="a" test /> <button ng-click="show(a)">查看</button> </div> 1 var app = angular.module('Demo', [], angular.noop); 2 3 app.directive('test', function(){ 4 var link = function($scope, $element, $attrs, $ctrl){ 5 6 $ctrl.$formatters.push(function(value){ 7 return value.join(','); 8 }); 910 $ctrl.$parsers.push(function(value){ 11 return value.split(','); 12 }); 13 } 1415 return {compile: function(){return link}, 16 require: 'ngModel', 17 restrict: 'A'} 18 }); 1920 app.controller('TestCtrl', function($scope){ 21 $scope.a = []; 22 //$scope.a = [1,2,3]; 23 $scope.show = function(v){ 24 console.log(v); 25 } 26 }); 上面在定義 `test` 這個指令， _require_ 參數指定了 `ngModel` 。同時因為 DOM 結構， `ng-model` 是存在的。于是， `link` 函數中就可以獲取到一個 _NgModelController_ 的實例，即代碼中的 `$ctrl` 。 我們添加了需要的過濾函數： - 從變量( `ModelValue` )到顯示值( `ViewValue` )的過程， `$formatters` 屬性，把一個列表變成一個字符串。 - 從顯示值到變量的過程， `$parsers` 屬性，把一個字符串變成一個列表。 對于顯示值和變量，還有其它的 API ，這里就不細說了。 另一部分，是關于數據校驗的，放到下一章同 _FormController_ 一起討論。