前言
在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 class="time-duration">
<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是在控制器中流通的值。很多时候，这两个值可能是不一样的。
比如你在页面上展示了一个日期，它显示的可能是“oct. 20 2015”这样的字符串，但是呢，这个字符串在控制器中对应的值可能是一个javascript的date对象的实例。
再比如，我们的这个time-duration示例中，$viewvalue其实指的是指令模板中num和unit组合出来的值，而$modelvalue是helloappcontroller中test变量对应的值。
$formatters和$parses
除了$viewvalue和$modelvalue这两个属性之外，还有两个用来处理他们的方法。分别是$parses和$formatters。
前者的是作用是将$viewvalue->$modelvalue，后者的作用恰好相反，是将$modelvalue->$viewvalue。
time-duration指令与外部控制器以及其内部的运作如下图，
1、在外部控制器中（即这里的helloapp的controller），我们通过ng-model="test"将test变量传入指令time-duration中，并建立绑定关系。
2、在指令内部，$modelvalue其实就是test值的一份拷贝。
3、我们通过$formatters()方法将$modelvalue转变成$viewvalue。
4、然后调用$render()方法将$viewvalue渲染到directive template中。
5、当我们通过某种途径监控到指令模板中的变量发生变化之后，我们调用$setviewvalue()来更新$viewvalue。
6、与（4）相对应，我们通过$parsers方法将$viewvalue转化成$modelvalue。
7、当$modelvalue发生变化后，则会去更新helloapp的ui。
完善指令逻辑
按照上面的流程，我们先来将$modelvalue转化成$viewvalue，然后在指令模板中进行渲染。
// $formatters接受一个数组
// 数组是一系列方法，用于将modelvalue转化成viewvalue
ngmodelcontroller.$formatters.push(function(modelvalue) {
var unit = 'minutes', num = 0, i, unitname;
modelvalue = parseint(modelvalue || 0);
for (i = multipliertypes.length-1; i >= 0; i--) {
unitname = multipliertypes[i];
if (modelvalue % multipliermap[unitname] === 0) {
unit = unitname;
break;
}
}
if (modelvalue) {
num = modelvalue / multipliermap[unit];
}
return {
unit: unit,
num: num
};
});
最后返回的对象就是$viewvalue的value。（当然$viewvalue还会有其他的一些属性。）
第二步，我们调用$render方法将$viewvalue渲染到指令模板中去。
// $render用于将viewvalue渲染到指令的模板中
ngmodelcontroller.$render = function() {
scope.unit = ngmodelctrl.$viewvalue.unit;
scope.num = ngmodelctrl.$viewvalue.num;
};
第三步，我们通过$watch来监控指令模板中num和unit变量。当其发生变化时，我们需要更新$viewvalue。
scope.$watch('unit + num', function() {
// $setviewvalue用于更新viewvalue
ngmodelcontroller.$setviewvalue({
unit: scope.unit,
num: scope.num
});
});
第四步，我们通过$parsers将$viewvalue->$modelvalue。
// $parsers接受一个数组
// 数组是一系列方法，用于将viewvalue转化成modelvalue
ngmodelcontroller.$parsers.push(function(viewvalue) {
var unit = viewvalue.unit；
var num = viewvalue.num;
var multiplier;
multiplier = multipliermap[unit];
return num * multiplier;
});
更多angularjs实践之使用ngmodelcontroller进行数据绑定。