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插件Tabs实现过程
Jul 06 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
vue内置指令详解
Apr 03 Javascript
Ajax实现异步加载数据
Nov 17 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常用Stream函数集介绍
2013/06/24 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
accesskey 提交
2006/06/26 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
使用Python实现微信提醒备忘录功能
2018/12/04 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python中加背景音乐如何操作
2020/07/19 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
上班离岗检讨书
2014/01/27 职场文书
求职信标题怎么写
2014/05/26 职场文书
公司年底活动方案
2014/08/17 职场文书
实习证明格式范文
2015/06/16 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
详解SQL的窗口函数
2022/04/21 Oracle