前言
在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>
登入後複製
我們的範例指令可以做這樣一件事，可以指定幾個常見的時間單位，並且能夠輸入資料。最終我們將得到對應的秒數。其功能的截圖如下，
這裡我們特意將test變數分別綁定到我們的自訂指令和預設指令中，以觀察其效果。
自訂指令
閒話少敘，下面來看程式碼
先上指令的範本。從上圖可以看出，指令包含一個輸入框一個下拉選擇框。
angular.module('HelloApp', [])
.directive('timeDuration', TimeDurationDirective);
.controller('HelloController', function($scope) {
$scope.test = 1;
});登入後複製
模板其實很簡單，這裡就不多說了。下面我們來看看這個指令的邏輯部分。
<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>
登入後複製
指令的link方法我們暫時TODO了它。後面會逐步完善。
我先來看看這個指令的定義，其中用到了require聲明。簡單來說，require的作用就是為這個directive宣告一個依賴關係，顯示此directive依賴另一個指令的controller屬性。
這裡稍微說明一下require的衍生用法。
我們可以在require前加上修辭量詞，例如，
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
}
};
}登入後複製
1、^前綴修飾表示允許找到對父級指令的指示。
2、?則表示將這個require動作變成一個可選項，意思就是找不到對應指令的controller就算了，不會拋出錯誤。
3.當然，我們也可以合併使用這兩個前綴修飾。
相對?ngModel，^ngModel我們使用的頻率要更加高一點。
例如
return {
require: '^ngModel'
}
return {
require: '?ngModel'
}
return {
require: '?^ngModel'
}登入後複製
這時，我們在other-directive中使用require: ^ngModel，它將自動查找my-directive指令聲明中的controller屬性。
使用NgModelController
當我們宣告了require: 'ngModel'之後，在link方法中會注入第四個參數，這個參數就是我們require的那個指令對應的controller。這裡就是內建指令ngModel的指控器ngModeController了。
<my-directive ng-model="my-model">
<other-directive></other-directive>
</my-directive>
登入後複製
$viewValue和$modelValue
在ngModelController中有兩個很重要的屬性，一個叫做$viewValue，一個叫做$mode。
這兩者的含義官方的解釋如下
$viewValue: Actual string value in the view.
$modelValue: The value
$modelValue: The value官方解釋有疑惑的話，我在這裡給出一種我個人的解釋。
$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進行資料綁定相关文章请关注PHP中文网！
