文档章节

Angularjs 配合bootstrap-datetimepicker.js ngModel取不到

wyysf
 wyysf
发布于 2015/04/08 11:56
字数 463
阅读 48
收藏 1

Angularjs 配合bootstrap-datetimepicker.js使用的时候,我写了个directive来做,在chrome下ok跑的很正常,等到在 firefox浏览器看看的时候发现不好使了,看来这个也是有浏览器兼容性啊,我以为都是正常的,没有浏览器兼容性,看来我错了。问题来了, 怎么解决呢?

仔细想了下问题的原因,如果你在输入框里手动键入的话没有任何问题,就是插件导入日期时间的时候不好使了。我最先想到的是加上$apply,但是什么时候加呢?加在什么位置呢?先看下datetimepicker的调用方式:

$('.timepicker').datetimepicker({
   language:"zh-CN",
   format:'yyyy-mm-dd hh:ii',
   autoclose:true,
   pickerPosition:"top-right"})

这个是插件的调用的api,从这个看来是没有办法来添加的,不知道什么时候还有就是直接写$apply对性能的有很大的浪费,所以我就像看看这个插件有没有什么回调函数啥的?

我就看了这个的源码,发现有这几个方法,show,hide,changeDate等等几个,想了下看看应该是hide这个方法可以使用,因为时机上是可以接受的。因此代码改成:

$('.timepicker').datetimepicker({
   language:"zh-CN",
   format:'yyyy-mm-dd hh:ii',
   autoclose:true,
   pickerPosition:"top-right"}).on("hide",function(){
   var $this = $(this);
   var _this = this;
   scope.$apply(function(){
       scope[$this.attr('ng-model')] = _this.value;
   });});

到此问题解决,但是还是不知道为什么chrome没有这个问题,知道的可以交流下。

© 著作权归作者所有

共有 人打赏支持
wyysf
粉丝 17
博文 19
码字总数 8346
作品 0
昌平
网页/平面设计
AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走
05/11
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
0
0
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
09/29
0
0
AngularDart4.0 英雄之旅-教程-03英雄编辑器

码云项目页:https://gitee.com/scooplolwiki/toh-1 在这一部分,您将修改起始应用程序以显示有关英雄的信息。 然后,您将添加编辑英雄信息的功能。 完成后,应用程序应该看起来像这个实例(...

scooplol
2017/10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

5whys分析法在美团工程师中的实践

前言 网站的质量和稳定性对于用户和公司来说至关重要,但是在网站的快速发展过程中,由于各种原因导致事故不可避免的发生,这些大大小小的事故对公司难免会造成一些负面的影响,为了避免同类...

Skqing
20分钟前
0
0
Android 接收监听开机完成,并且开机自启动

1,定义一个广播接收者的类 ,并重写抽象方法 public class BootCompleteReceiver extends BroadcastReceiver 2,在Androidmanifest 注册 <receiver android:name=".receiver.BootCompleteRece......

lanyu96
24分钟前
1
0
小程序记录

1、button的边框、角等需要在伪元素after修改去除

originDu
26分钟前
0
0
微博什么技术啊……还说支持八个明星并发出轨,结果…

是的,大家可能都知道了,女神张靓颖结婚了。。 我去,写错了,是————赵丽颖。 为什么我头脑一瞬间出现的是张靓颖,作为一个码农,技术宅,拼音缩小都是 ZLY,博主我真有点傻傻分不清楚了...

Java技术栈
26分钟前
3
0
模块化

1,什么是模块化? 模块化是指将一个复杂的系统分解为多个模块,方便编码。 2,为什么要用模块化? 降低复杂性,降低代码耦合度,部署方便,提高效率。 3,模块化的好处? a,避免命名冲突,减少...

羊皮卷
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部