### 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_ 一起讨论。