前言

在Angular應(yīng)用中，ng-model指令時(shí)不可缺少的一個(gè)部分，它用來(lái)將視圖綁定到數(shù)據(jù)，是雙向綁定魔法中重要的一環(huán)。ngModelController則是ng-model指令中所定義的controller。這個(gè)controller包含了一些用于數(shù)據(jù)綁定，驗(yàn)證，CSS更新，以及數(shù)值格式化和解析的服務(wù)。它不用來(lái)進(jìn)行DOM渲染或者監(jiān)聽(tīng)DOM事件。與DOM相關(guān)的邏輯都應(yīng)該包含在其他的指令中，然后讓這些指令來(lái)試用ngModelController中的數(shù)據(jù)綁定功能。

注意：本篇文章不是對(duì)NgModelController文檔的說(shuō)明，而是更偏向?qū)嵺`。下面我將全程帶領(lǐng)大家去實(shí)現(xiàn)一個(gè)自定義指令，并且利用ng-model屬性來(lái)做雙方的數(shù)據(jù)綁定。

示例

我們的app中使用了一個(gè)自定義的指令，名字叫做timeDruation

如下

<div ng-app="HelloApp" ng-controller="HelloController">
 <h1>自定義指令</h1>
 <time-duration ng-model="test"></time-duration>
 <h1>默認(rèn)指令</h1>
 <input ng-model="test">second
</div>

JS代碼如下，

angular.module('HelloApp', [])
 .directive('timeDuration', TimeDurationDirective);
 .controller('HelloController', function($scope) {
 $scope.test = 1;
 });

我們的示例指令可以做這樣一件事，可以指定幾個(gè)常見(jiàn)的時(shí)間單位，并且能夠輸入數(shù)據(jù)。最終我們將得到對(duì)應(yīng)的秒數(shù)。其功能的截圖如下，

這里我們特意將test變量分別綁定到我們的自定義指令和默認(rèn)指令中，以觀察其效果。

自定義指令

閑話少敘，下面來(lái)看代碼

先上指令的模板。從上圖中可以看出，指令包含一個(gè)輸入框一個(gè)下拉選擇框。

<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>

模板其實(shí)很簡(jiǎn)單，這里就不多說(shuō)了。下面我們來(lái)看看這個(gè)指令的邏輯部分。

function TimeDurationDirective() {
 var tpl = '....'; // 指令模板代碼就是上面的內(nèi)容，這里就不復(fù)制了。
 
 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方法我們暫時(shí)TODO了它。后面會(huì)逐步完善。

我先來(lái)看看這個(gè)指令的定義，其中用到了require聲明。簡(jiǎn)單來(lái)說(shuō)，require的作用就是為這個(gè)directive聲明一個(gè)依賴關(guān)系，表明此directive依賴另一個(gè)指令的controller屬性。

這里稍微說(shuō)明一下require的衍生用法。

我們可以在require前加上修辭量詞，比如，

return {
 require: '^ngModel'
}

return {
 require: '?ngModel'
}

return {
 require: '?^ngModel'
}

     1、^前綴修飾表示允許查找當(dāng)前指令的父級(jí)指令，如果找不到對(duì)應(yīng)指令的controller則拋出一個(gè)錯(cuò)誤。

     2、?則表示將這個(gè)require動(dòng)作變成一個(gè)可選項(xiàng)，意思就是找不到對(duì)應(yīng)指令的controller就算了，不會(huì)拋出錯(cuò)誤。

     3、當(dāng)然，我們也可以聯(lián)合使用這兩個(gè)前綴修飾。

相對(duì)?ngModel，^ngModel我們使用的頻率要更加高一點(diǎn)。

比如

<my-directive ng-model="my-model">
 <other-directive></other-directive>
</my-directive>

這時(shí)，我們?cè)趏ther-directive中使用require: ^ngModel，它將會(huì)自動(dòng)查找my-directive指令聲明中的controller屬性。

使用NgModelController

當(dāng)我們聲明了require: 'ngModel'之后，在link方法中會(huì)注入第四個(gè)參數(shù)，這個(gè)參數(shù)就是我們r(jià)equire的那個(gè)指令對(duì)應(yīng)的controller。這里就是內(nèi)置指令ngModel的指控器ngModeController了。

link: function (scope, element, attrs, ngModelCtrl) {
 // TODO
}

$viewValue和$modelValue

在ngModelController中有兩個(gè)很重要的屬性，一個(gè)叫做$viewValue，一個(gè)叫做$modeValue。

這兩者的含義官方的解釋如下

     $viewValue: Actual string value in the view.

     $modelValue: The value in the model, that the control is bound to.

如果你對(duì)上面的官方解釋有疑惑的話，我這里給出一種我個(gè)人的解釋。

$viewView就是指令渲染模板所用的值，而$modelView是在控制器中流通的值。很多時(shí)候，這兩個(gè)值可能是不一樣的。

比如你在頁(yè)面上展示了一個(gè)日期，它顯示的可能是“Oct. 20 2015”這樣的字符串，但是呢，這個(gè)字符串在控制器中對(duì)應(yīng)的值可能是一個(gè)Javascript的Date對(duì)象的實(shí)例。

再比如，我們的這個(gè)time-duration示例中，$viewValue其實(shí)指的是指令模板中num和unit組合出來(lái)的值，而$modelValue是HelloAppController中test變量對(duì)應(yīng)的值。

$formatters和$parses

除了$viewValue和$modelValue這兩個(gè)屬性之外，還有兩個(gè)用來(lái)處理他們的方法。分別是$parses和$formatters。

前者的是作用是將$viewValue->$modelValue，后者的作用恰好相反，是將$modelValue->$viewValue。

time-duration指令與外部控制器以及其內(nèi)部的運(yùn)作如下圖，

     1、在外部控制器中（即這里的HelloApp的controller），我們通過(guò)ng-model="test"將test變量傳入指令time-duration中，并建立綁定關(guān)系。

     2、在指令內(nèi)部，$modelValue其實(shí)就是test值的一份拷貝。

     3、我們通過(guò)$formatters()方法將$modelValue轉(zhuǎn)變成$viewValue。

     4、然后調(diào)用$render()方法將$viewValue渲染到directive template中。

     5、當(dāng)我們通過(guò)某種途徑監(jiān)控到指令模板中的變量發(fā)生變化之后，我們調(diào)用$setViewValue()來(lái)更新$viewValue。

     6、與（4）相對(duì)應(yīng)，我們通過(guò)$parsers方法將$viewValue轉(zhuǎn)化成$modelValue。

     7、當(dāng)$modelValue發(fā)生變化后，則會(huì)去更新HelloApp的UI。

完善指令邏輯

按照上面的流程，我們先來(lái)將$modelValue轉(zhuǎn)化成$viewValue，然后在指令模板中進(jìn)行渲染。

// $formatters接受一個(gè)數(shù)組
// 數(shù)組是一系列方法，用于將modelValue轉(zhuǎn)化成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
 };
});

最后返回的對(duì)象就是$viewValue的value。（當(dāng)然$viewValue還會(huì)有其他的一些屬性。）

第二步，我們調(diào)用$render方法將$viewValue渲染到指令模板中去。

// $render用于將viewValue渲染到指令的模板中
ngModelController.$render = function() {
 scope.unit = ngModelCtrl.$viewValue.unit;
 scope.num = ngModelCtrl.$viewValue.num;
};

第三步，我們通過(guò)$watch來(lái)監(jiān)控指令模板中num和unit變量。當(dāng)其發(fā)生變化時(shí)，我們需要更新$viewValue。

scope.$watch('unit + num', function() {
// $setViewValue用于更新viewValue
 ngModelController.$setViewValue({
 unit: scope.unit,
 num: scope.num
 });
});

第四步，我們通過(guò)$parsers將$viewValue->$modelValue。

// $parsers接受一個(gè)數(shù)組
// 數(shù)組是一系列方法，用于將viewValue轉(zhuǎn)化成modelValue
ngModelController.$parsers.push(function(viewValue) {
 var unit = viewValue.unit；
 var num = viewValue.num;
 var multiplier;

 multiplier = multiplierMap[unit];

 return num * multiplier;
});

總結(jié)

好了，到這一個(gè)雙方的數(shù)據(jù)綁定邏輯就建立了。不知道大家都學(xué)會(huì)了嗎？希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

最新評(píng)論