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 相关文章推荐
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
JavaScript惰性载入函数实例分析
Mar 27 Javascript
详解React 元素渲染
Jul 07 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
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
python urllib和urllib3知识点总结
2021/02/08 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
党员评议思想汇报
2014/10/08 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
异地恋情人节寄语
2015/02/28 职场文书
上班迟到检讨书
2015/05/06 职场文书
团拜会主持词
2015/07/04 职场文书
新闻报道稿范文
2015/07/23 职场文书
Python Flask实现进度条
2022/05/11 Python