angularjs结合jquery等js插件 双向绑定不生效解决办法

本文探讨了AngularJS项目中使用纯JS插件(如日期选择器)导致的数据不同步问题。主要原因是JS插件修改DOM后未能触发AngularJS的脏检查机制。文章提供了解决方案,包括定时调用$apply()来刷新数据。

       前言:在使用Angularjs时候,可能还是会使用一些jQuery等插件,或者其他javascript插件。这个时候最常见的问题就是: 使用插件进行赋值后,angularjs进行的双向绑定不生效,js修改了表单值却不在model中更新 。。[一脸懵逼]。。

 

 问题:  前段时间也遇到了使用时间插件时候对时间表单绑定数据失效的问题,并尝试多种方法解决

 

原因:

出现问题自然首先想到的肯定是检查代码无误,然后确定是日期插件(纯JS插件)修改了input的表单值但是未触发Angularjs的dirtyCheck机制,没有使用$apply()刷新双向绑定的数据,表单看到的数据和model真实数据是不一样的。

 

解决:

结合自己的思路并上网查资料总结如下

1、我想的是修改源码来触发刷新机制(源码是压缩滴看的挺累),通过封装指令来实现刷新但是太麻烦还类似打补丁不利于后期维护,放弃;

2、网上说在表单添加 onchange="" 等 以及 参考$( '#Username' ).val( _username ).trigger( 'change' );  都是以触发来实现刷新 (原理似乎可行,但都不生效呢);

3、

setInterval(function () {
        $scope.$apply(function () {
            $scope.dailyParams.starttime = document.getElementById('starttime').value;
            $scope.dailyParams.endtime = document.getElementById('endtime').value;
        });
    }, 500);

这样,不需要复杂的思路和源码修改,直截了当的定时 $apply() 刷新数据即可;

(总觉得不是最优解,有好建议的朋友欢迎拍砖)

 

 

原文链接: http://zl378837964.iteye.com/blog/2324468

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值