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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
详解javascript高级定时器
Dec 31 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
微信小程序template模板实例详解
Oct 27 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
详谈js模块化规范
2017/07/07 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
django项目中新增app的2种实现方法
2020/04/01 Python
如何基于线程池提升request模块效率
2020/04/18 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
员工拾金不昧表扬稿
2015/05/05 职场文书
初中生物教学随笔
2015/08/15 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js