AngularJS實踐之使用NgModelController進行資料繫結_AngularJS

前言

在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轉化成viewValuengModelController.$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轉化成modelValuengModelController.$parsers.push(function(viewValue) { var unit = viewValue.unit； var num = viewValue.num; var multiplier; multiplier = multiplierMap[unit]; return num * multiplier;});

總結

好了，到這一個雙方的資料繫結邏輯就建立了。不知道大家都學會了嗎？希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。