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

阅读更多

       前言：在使用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

 

 

• 
• 大小: 2.8 KB

• 
• 大小: 3.4 KB

• 查看图片附件