预定义的 NgModelController
最后更新于：2022-04-01 22:40:46
### 18.10. 预定义的 NgModelController
在前面讲 conroller 参数的时候，提到过可以为指令定义一个 conroller 。官方的实现中，有很多已定义的指令，这些指令当中，有两个已定义的 conroller ，它们是 _NgModelController_ 和 _FormController_ ，对应 _ng-model_ 和 _form_ 这两个指令（可以参照前面的“表单控件”一章）。
在使用中，除了可以通过 `$scope` 来取得它们的引用之外，也可以在自定义指令中通过 _require_ 参数直接引用，这样就可以在 `link` 函数中使用 controller 去实现一些功能。
先看 _NgModelController_ 。这东西的作用有两个，一是控制 `ViewValue` 与 `ModelValue` 之间的转换关系（你可以实现看到的是一个值，但是存到变量里变成了另外一个值），二是与 _FormController_ 配合做数据校验的相关逻辑。
先看两个应该是最有用的属性：
_$formatters_ 是一个由函数组成的列表，串行执行，作用是把变量值变成显示的值。_$parsers_ 与上面的方向相反，把显示的值变成变量值。
假设我们在变量中要保存一个列表的类型，但是显示的东西只能是字符串，所以这两者之间需要一个转换：
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_ 一起讨论。
';