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 相关文章推荐
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php对称加密算法示例
2014/05/07 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python之用户输入的实例
2018/06/22 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
入党申请自荐书范文
2014/02/11 职场文书
好的旅游活动方案
2014/08/19 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
期中考试复习计划
2015/01/19 职场文书
幸福来敲门观后感
2015/06/04 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript