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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python之list对应元素求和的方法
2018/06/28 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
老人祝寿主持词
2014/03/28 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
用python实现监控视频人数统计
2021/05/21 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis