Question

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       });
 9   
10       $ctrl.$parsers.push(function(value){
11         return value.split(',');
12       });
13     }
14   
15     return {compile: function(){return link},
16             require: 'ngModel',
17             restrict: 'A'}
18   });
19   
20   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` 一起讨论。