前端之家收集整理的这篇文章主要介绍了
Angular js指令收录(六),
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方。今天我们就来说一说AngularJS中的NgModelController。
在AngularJS的内置指令中,有一个directive叫做ngModel,我们可以用它来沟通控制器和视图层的数据交换。说的简单点,就是我们可以用它来做双方数据绑定。
这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModel
的controller
来做双向数据绑定。
注意,本篇文章不是对NgModelController
文档的说明,而是更偏向实践。下面我将全程带领大家去实现一个自定义指令,并且利用ng-model
属性来做双方的数据绑定。
示例
我们的app中使用了一个自定义的指令,名字叫做timeDruation
,如下,
- 1
2 3 4 5 6
|
- <div ng-app="HelloApp" ng-controller="HelloController">
<h1>自定义指令</h1> <time-duration ng-model="test"></time-duration> <h1>默认指令<input ng-model="test">second </div>
|
JS代码如下,
- 1
2 3 4 5
|
- angular.module('HelloApp',[])
.directive('timeDuration',TimeDurationDirective); .controller('HelloController',function($scope) { $scope.test = 1; });
|
我们的示例指令可以做这样一件事,可以指定几个常见的时间单位,并且能够输入数据。最终我们将得到对应的秒数。其功能的截图如下,
这里我们特意将test
变量分别绑定到我们的自定义指令和默认指令中,以观察其效果。
闲话少叙,show my code.
先上指令的模板。从上图中可以看出,指令包含一个输入框一个下拉选择框。
- 1
2 3 4 5 6 7 8 9
|
- <div class="time-duration">
'num'> <select ng-model='unit'> <option value="seconds">Seconds</option> "minutes">Minutes"hours">Hours"days">Days</option> </select> 模板其实很简单,这里就不多说了。下面我们来看看这个指令的逻辑部分。 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 前加上修辞量词,比如, return { '^ngModel' }
'?ngModel' }
'?^ngModel' }
|
-
^ 前缀修饰表示允许查找当前指令的父级指令,如果找不到对应指令的controller则抛出一个错误。 ? 则表示将这个require动作变成一个可选项,意思就是找不到对应指令的controller就算了,不会抛出错误。 -
相对?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 了。 -
$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 。 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/ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
|