免費AI編程助手
在Angular指令中使用NgModelController做數(shù)據(jù)綁定
前言
AngularJS中的指令是其尤為復(fù)雜的一個部分，但是這也是其比較好玩的地方。今天我們就來說一說AngularJS中的NgModelController。
在AngularJS的內(nèi)置指令中，有一個directive叫做ngModel，我們可以用它來溝通控制器和視圖層的數(shù)據(jù)交換。說的簡單點，就是我們可以用它來做雙方數(shù)據(jù)綁定。
這篇文章我們就來說一說如何在我們自定義的指令中，利用ngModel的controller來做雙向數(shù)據(jù)綁定。
注意，本篇文章不是對NgModelController文檔的說明，而是更偏向?qū)嵺`。下面我將全程帶領(lǐng)大家去實現(xiàn)一個自定義指令，并且利用ng-model屬性來做雙方的數(shù)據(jù)綁定。
示例
我們的app中使用了一個自定義的指令，名字叫做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;
});我們的示例指令可以做這樣一件事，可以指定幾個常見的時間單位，并且能夠輸入數(shù)據(jù)。最終我們將得到對應(yīng)的秒數(shù)。其功能的截圖如下，
這里我們特意將test變量分別綁定到我們的自定義指令和默認(rèn)指令中，以觀察其效果。
自定義指令
閑話少敘，show my code.
先上指令的模板。從上圖中可以看出，指令包含一個輸入框一個下拉選擇框。
<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 = '....'; // 指令模板代碼就是上面的內(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方法我們暫時TODO了它。后面會逐步完善。
我先來看看這個指令的定義，其中用到了require聲明。我的博客中這篇文章AngularJS Directive用法說明對require的用法作了詳細(xì)的說明。簡單來說，require的作用就是為這個directive聲明一個依賴關(guān)系，表明此directive依賴另一個指令的controller屬性。
這里稍微說明一下require的衍生用法。我們可以在require前加上修辭量詞，比如，
return {
require: '^ngModel'
}
return {
require: '?ngModel'
}
return {
require: '?^ngModel'
}^前綴修飾表示允許查找當(dāng)前指令的父級指令，如果找不到對應(yīng)指令的controller則拋出一個錯誤。?則表示將這個require動作變成一個可選項，意思就是找不到對應(yīng)指令的controller就算了，不會拋出錯誤。- 當(dāng)然，我們也可以聯(lián)合使用這兩個前綴修飾。
相對?ngModel，^ngModel我們使用的頻率要更加高一點。比如，
<my-directive ng-model="my-model">
<other-directive></other-directive>
</my-directive>這時，我們在other-directive中使用require: ^ngModel，它將會自動查找my-directive指令聲明中的controller屬性。
使用NgModelController
當(dāng)我們聲明了require: 'ngModel'之后，在link方法中會注入第四個參數(shù)，這個參數(shù)就是我們require的那個指令對應(yīng)的controller。這里就是內(nèi)置指令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”這樣的字符串，但是呢，這個字符串在控制器中對應(yīng)的值可能是一個Javascript的Date對象的實例。
再比如，我們的這個time-duration示例中，$viewValue其實指的是指令模板中num和unit組合出來的值，而$modelValue是HelloAppController中test變量對應(yīng)的值。
$formatters和$parses
除了$viewValue和$modelValue這兩個屬性之外，還有兩個用來處理他們的方法。分別是$parses和$formatters。
前者的是作用是將$viewValue->$modelValue，后者的作用恰好相反，是將$modelValue->$viewValue。
time-duration指令與外部控制器以及其內(nèi)部的運作如下圖，
- 在外部控制器中（即這里的
HelloApp的controller），我們通過ng-model="test"將test變量傳入指令time-duration中，并建立綁定關(guān)系。 - 在指令內(nèi)部，
$modelValue其實就是test值的一份拷貝。 - 我們通過
$formatters()方法將$modelValue轉(zhuǎn)變成$viewValue。 - 然后調(diào)用
$render()方法將$viewValue渲染到directive template中。 - 當(dāng)我們通過某種途徑監(jiān)控到指令模板中的變量發(fā)生變化之后，我們調(diào)用
$setViewValue()來更新$viewValue。 - 與（4）相對應(yīng)，我們通過
$parsers方法將$viewValue轉(zhuǎn)化成$modelValue。 - 當(dāng)
$modelValue發(fā)生變化后，則會去更新HelloApp的UI。
完善指令邏輯
按照上面的流程，我們先來將$modelValue轉(zhuǎn)化成$viewValue，然后在指令模板中進(jìn)行渲染。
// $formatters接受一個數(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
};
});最后返回的對象就是$viewValue的value。（當(dāng)然$viewValue還會有其他的一些屬性。）
第二步，我們調(diào)用$render方法將$viewValue渲染到指令模板中去。
// $render用于將viewValue渲染到指令的模板中
ngModelController.$render = function() {
scope.unit = ngModelCtrl.$viewValue.unit;
scope.num = ngModelCtrl.$viewValue.num;
};第三步，我們通過$watch來監(jiān)控指令模板中num和unit變量。當(dāng)其發(fā)生變化時，我們需要更新$viewValue。
scope.$watch('unit + num', function() {
// $setViewValue用于更新viewValue
ngModelController.$setViewValue({
unit: scope.unit,
num: scope.num
});
});第四步，我們通過$parsers將$viewValue->$modelValue。
// $parsers接受一個數(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;
});這樣一個雙方的數(shù)據(jù)綁定邏輯就建立了。這里有一個在線示例，就是文中示例的完整代碼，你可以去體驗一下。
更多建議：