AngularJS实践之使用NgModelController进行数据绑定


Posted in Javascript onOctober 08, 2016

前言

在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;
 });

我们的示例指令可以做这样一件事,可以指定几个常见的时间单位,并且能够输入数据。最终我们将得到对应的秒数。其功能的截图如下,

AngularJS实践之使用NgModelController进行数据绑定

这里我们特意将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指令与外部控制器以及其内部的运作如下图,

AngularJS实践之使用NgModelController进行数据绑定

     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转化成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。(当然$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转化成modelValue
ngModelController.$parsers.push(function(viewValue) {
 var unit = viewValue.unit;
 var num = viewValue.num;
 var multiplier;

 multiplier = multiplierMap[unit];

 return num * multiplier;
});

总结

好了,到这一个双方的数据绑定逻辑就建立了。不知道大家都学会了吗?希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
react中的DOM操作实现
Jun 30 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 #Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 #Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 #Javascript
Javascript单例模式的介绍和实例
Oct 08 #Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 #Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
js验证表单第二部分
2006/11/25 Javascript
Document 对象的常用方法
2009/07/31 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JS中去掉array中重复元素的方法
2017/05/26 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
应届生幼儿园求职信
2013/11/12 职场文书
学习标兵获奖感言
2014/02/20 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
法人任命书范本
2014/06/04 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
法人委托书的范本格式
2014/09/11 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2019销售早会主持词
2019/06/27 职场文书