Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例


Posted in Javascript onJanuary 22, 2017

00.混乱的前端界

Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学。在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑。而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊。

01.Angular vs jQuery

Angular模块化和解耦的思路确实值得一学,但是相对于成熟的jQuery插件库,Angular就显得寒酸了不少,比如,Angular-UI中日期控件是这样的:

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

丑的不要不要的,还不能选时间,相比之下jQuery就有很多优秀的控件了比如这样的:

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

此插件传送门:http://xdsoft.net/jqplugins/datetimepicker/

那么问题来了,控件一般是直接像这样$("#xx").val("xx")直接塞值进<input />标签的,这不会触发ng-change事件,ng-model也不会被更新,于是笔者写了个Angular适配指令,来实现这个控件的双向绑定,对于其他jQuery插件,也可以用类似的思路来进行适配。

10.干货

下面是一个Demo,比较两者的不同,注意右边ng-bind的属性使用adapter是会同步变化的↓

Demo传送门:http://xiazai.3water.com/201701/yuanma/angular.DatetimePicker_3water.rar

angular.module("directives",[]).directive("datetimepicker",function(){
  return {
    restrict: "EA",  //指令作用范围是element或attribute
    require : "ngModel", //控制器是指令标签对应的ngModel
    link: function (scope, element, attrs, ctrl) {

      var unregister = scope.$watch(function(){        //关键点,下面详述

        $(element).append("<input id='date-"+attrs.dateid+"' style='border:none;width:100%' value='"+ctrl.$modelValue+"'>");
 //template用不好,于是用这个笨办法加上input标签

        element.on('change', function() { //注册onChange事件,设置viewValue
          scope.$apply(function() {
            ctrl.$setViewValue($("#date-"+attrs.dateid).val());
          });
        });

        element.on('click',function(){  //click触发日期框
          $("#date-"+attrs.dateid).datetimepicker({ 
            format : attrs.format || 'Y/m/d h:i',  //格式
            onClose : function(){          //关闭日期框时手动触发change事件
              element.change();
            }
          });
        });

        element.click();    //第一次绑定事件,模拟一次click,否则肯能要点两下才会出日期框

        return ctrl.$modelValue;
      }, initialize);

      function initialize(value){ //下面再说
        ctrl.$setViewValue(value);
        unregister();
      }
    }
  }
});

写这个指令过程中遇到了一个大坑,查了很久才明白,Angular初始化一个ngModel的时候,是会先给它的value置为NaN,初始化必须要先调用$watch()来监测真正值被设置的时候,然后调用上面的initialize方法来设置view值。否则在Controller中设置的初始值会变成NaN。

11.不足之处

原插件是有很多可选项的,我只实现了一个最基本的format,有其他需求的自行改代码吧。可以利用第三个attrs参数获取属性,然后调用原插件的配置方法,来实现更复杂的逻辑。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
JavaScript 详解预编译原理
Jan 22 #Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 #Javascript
loading动画特效小结
Jan 22 #Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 #Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 #Javascript
You might like
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python读写Redis数据库操作示例
2014/03/18 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
python已协程方式处理任务实现过程
2019/12/27 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
销售总监岗位职责
2014/01/04 职场文书
优秀求职信范文分享
2014/01/26 职场文书
幼儿教师研修感言
2014/02/12 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
中层干部考核评语
2015/01/04 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
用Python实现Newton插值法
2021/04/17 Python
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers