在Angular应用中，ng-model指令时不可缺少的一个部分，它用来将视图绑定到数据，是双向绑定魔法中重要的一环。ngModelController则是ng-model指令中所定义的controller。这个controller包含了一些用于数据绑定，验证，CSS更新，以及数值格式化和解析的服务。它不用来进行DOM渲染或者监听DOM事件。与DOM相关的逻辑都应该包含在其他的指令中，然后让这些指令来试用ngModelController中的数据绑定功能。
注意：本篇文章不是对NgModelController文档的说明，而是更偏向实践。下面我将全程带领大家去实现一个自定义指令，并且利用ng-model属性来做双方的数据绑定。
示例
我们的app中使用了一个自定义的指令，名字叫做timeDruation
如下
<div ng-app="HelloApp" ng-controller="HelloController"> <h1>自定义指令</h1> <time-duration ng-model="test"></time-duration> <h1>默认指令</h1> <input ng-model="test">second </div>
JS代码如下，
angular.module('HelloApp', []) .directive('timeDuration', TimeDurationDirective); .controller('HelloController', function($scope) { $scope.test = 1; });
我们的示例指令可以做这样一件事，可以指定几个常见的时间单位，并且能够输入数据。最终我们将得到对应的秒数。其功能的截图如下，
这里我们特意将test变量分别绑定到我们的自定义指令和默认指令中，以观察其效果。
自定义指令
闲话少叙，下面来看代码
先上指令的模板。从上图中可以看出，指令包含一个输入框一个下拉选择框。
<div> <input ng-model='num'> <select ng-model='unit'> <option value="seconds">Seconds</option> <option value="minutes">Minutes</option> <option value="hours">Hours</option> <option value="days">Days</option> </select> </div>
模板其实很简单，这里就不多说了。下面我们来看看这个指令的逻辑部分。
function TimeDurationDirective() { var tpl = '....'; // 指令模板代码就是上面的内容，这里就不复制了。 return { restrict: 'E', replace: true, template: tpl, require: 'ngModel', scope: {}, link: function(scope, element, attrs, ngModelController) { var multiplierMap = { seconds: 1, minutes: 60, hours: 3600, days: 86400 }; var multiplierTypes = ['seconds', 'minutes', 'hours', 'days']; // TODO } }; }
指令的link方法我们暂时TODO了它。后面会逐步完善。
我先来看看这个指令的定义，其中用到了require声明。简单来说，require的作用就是为这个directive声明一个依赖关系，表明此directive依赖另一个指令的controller属性。
这里稍微说明一下require的衍生用法。
我们可以在require前加上修辞量词，比如，
return { require: '^ngModel' } return { require: '?ngModel' } return { require: '?^ngModel' }
1、^前缀修饰表示允许查找当前指令的父级指令，如果找不到对应指令的controller则抛出一个错误。
2、?则表示将这个require动作变成一个可选项，意思就是找不到对应指令的controller就算了，不会抛出错误。
3、当然，我们也可以联合使用这两个前缀修饰。
相对?ngModel，^ngModel我们使用的频率要更加高一点。
比如
<my-directive ng-model="my-model"> <other-directive></other-directive> </my-directive>
这时，我们在other-directive中使用require: ^ngModel，它将会自动查找my-directive指令声明中的controller属性。
使用NgModelController
当我们声明了require: 'ngModel'之后，在link方法中会注入第四个参数，这个参数就是我们require的那个指令对应的controller。这里就是内置指令ngModel的指控器ngModeController了。
link: function (scope, element, attrs, ngModelCtrl) { // TODO }
$viewValue和$modelValue
在ngModelController中有两个很重要的属性，一个叫做$viewValue，一个叫做$modeValue。
这两者的含义官方的解释如下
$viewValue: Actual string value in the view.
$modelValue: The value in the model, that the control is bound to.
如果你对上面的官方解释有疑惑的话，我这里给出一种我个人的解释。
$viewView就是指令渲染模板所用的值，而$modelView是在控制器中流通的值。很多时候，这两个值可能是不一样的。