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学习之闭包分析
Dec 02 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
原生JS实现留言板功能
Feb 08 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
原生JS轮播图插件
2017/02/09 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python设计模式之MVC模式简单示例
2018/01/10 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
个人求职信范文分享
2014/01/31 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
大学信息公开实施方案
2014/03/09 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers