Angularjs 配合bootstrap-datetimepicker.js ngModel取不到
博客专区 > wyysf 的博客 > 博客详情
Angularjs 配合bootstrap-datetimepicker.js ngModel取不到
wyysf 发表于3年前
Angularjs 配合bootstrap-datetimepicker.js ngModel取不到
  • 发表于 3年前
  • 阅读 38
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

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

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没有这个问题,知道的可以交流下。

共有 人打赏支持
粉丝 15
博文 8
码字总数 7046
×
wyysf
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: