模板其实很简单，这里就不多说了。下面我们来看看这个指令的逻辑部分。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function TimeDurationDirective() {
var tpl = '....';
return {
restrict: 'E',
replace: true,
template: tpl,
require: 'ngModel',
scope: {},
link: scope,element,attrs,ngModelController) {
var multiplierMap = {
seconds: 1,
minutes: 60,
hours: 3600,
days: 86400
};
var multiplierTypes = ['seconds','minutes',104)">'hours',104)">'days'];
}
};
}
|
指令的link方法我们暂时TODO了它。后面会逐步完善。
我先来看看这个指令的定义，其中用到了require声明。我的博客中这篇文章AngularJS Directive用法说明对require的用法作了详细的说明。简单来说，require的作用就是为这个directive声明一个依赖关系，表明此directive依赖另一个指令的controller属性。
这里稍微说明一下require的衍生用法。我们可以在require前加上修辞量词，比如，
1
2
3
4
5
6
7
8
9
10
11
|
return {
'^ngModel'
}
'?ngModel'
}
'?^ngModel'
}
|
^前缀修饰表示允许查找当前指令的父级指令，如果找不到对应指令的controller则抛出一个错误。?则表示将这个require动作变成一个可选项，意思就是找不到对应指令的controller就算了，不会抛出错误。- 当然，我们也可以联合使用这两个前缀修饰。
相对?ngModel，^ngModel我们使用的频率要更加高一点。比如，
1
2
3
|
<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了。
$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变量对应的值。
除了$modelValue这两个属性之外，还有两个用来处理他们的方法。分别是$parses和$formatters。
前者的是作用是将$viewValue->$modelValue，后者的作用恰好相反，是将$modelValue->$viewValue。
time-duration指令与外部控制器以及其内部的运作如下图，
- 在外部控制器中（即这里的
HelloApp的controller），我们通过ng-model="test"将test变量传入指令time-duration中，并建立绑定关系。
- 在指令内部，
$modelValue其实就是test值的一份拷贝。
- 我们通过
$formatters()方法将$modelValue转变成$viewValue。
- 然后调用
$render()方法将$viewValue渲染到directive template中。
- 当我们通过某种途径监控到指令模板中的变量发生变化之后，我们调用
$setViewValue()来更新$viewValue。
- 与（4）相对应，我们通过
$parsers方法将$viewValue转化成$modelValue。
- 当
$modelValue发生变化后，则会去更新HelloApp的UI。
完善指令逻辑
按照上面的流程，我们先来将$modelValue转化成$viewValue，然后在指令模板中进行渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
ngModelController.$formatters.push(modelValue) {
var unit = 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 = ) {
scope.unit = ngModelCtrl.$viewValue.unit;
scope.num = ngModelCtrl.$viewValue.num;
};
|
第三步，我们通过$watch来监控指令模板中unit变量。当其发生变化时，我们需要更新$viewValue。
1
2
3
4
5
6
7
|
scope.$watch('unit + num',95)">) {
ngModelController.$setViewValue({
unit: scope.unit,
num: scope.num
});
});
|
第四步，我们通过$parsers将$modelValue。
// $parsers接受一个数组
ngModelController.$parsers.push(viewValue) {
var unit = viewValue.unit；
var num = viewValue.num;
var multiplier;
multiplier = multiplierMap[unit];
return num * multiplier;
});
|
这样一个双方的数据绑定逻辑就建立了。这里有一个在线示例，就是文中示例的完整代码，你可以去体验一下。
转载地址：http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive/
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
