`
zl378837964
  • 浏览: 190032 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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
分享到:
评论

相关推荐

    AngularJS封装jQuery Datepicker

    总结,AngularJS封装jQuery Datepicker是将两者的优势结合,利用AngularJS的双向数据绑定和指令系统,以及jQuery Datepicker的易用性和灵活性,为开发者提供了一种高效且定制化的日期选择解决方案。通过理解这些知识...

    angularJS和Jquery

    **标题与描述解析** 标题"angularJS和Jquery"提到了两种JavaScript库——...在实际项目中,开发者可能会根据需求结合使用,比如利用AngularJS的MVC架构和数据绑定,结合jQuery的DOM操作和动画功能,以达到最佳效果。

    AngularJS封装jQuery-File-Upload

    这篇名为“AngularJS封装jQuery-File-Upload”的博文主要探讨了如何将jQuery-File-Upload的功能整合到AngularJS的应用中,以便充分利用AngularJS的数据双向绑定和模块化特性,同时保持jQuery-File-Upload的强大功能...

    AngularJS封装jQuery DateTimepicker

    总结起来,这篇博客会涵盖AngularJS指令的创建、jQuery与AngularJS的结合使用,以及如何封装jQuery DateTimepicker以适应AngularJS的数据绑定机制。对于那些在AngularJS项目中需要日期时间选择功能的开发者来说,这...

    easyui+jquery插件+angularJS

    标题中的“easyui+jquery插件+angularJS”揭示了这个压缩包可能包含的三个主要技术:EasyUI、jQuery插件以及AngularJS。这三种技术都是前端开发中的关键组件,分别对应于用户界面框架、JavaScript库和单页应用框架。...

    一个jQuery插件用于数据绑定的HTMLRender模板引擎

    HTMLRender是一款基于jQuery的数据绑定模板引擎,主要用于帮助开发者在JavaScript中高效地进行DOM操作和数据渲染。这款插件是jQuery的一个扩展,它提供了一种简洁的语法来将数据与HTML结构进行绑定,使得动态生成和...

    jQuery双向数据绑定插件way.js

    way.js是一个简单的,轻量级的,持续的,framework-agnostic JavaScript库,允许您将DOM元素绑定到一个内存数据中存储。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info546

    实时双向数据绑定插件jQuery.my.zip

    jQuery.my 这个插件用于实时双向数据绑定。它发生变异给出的数据源对象,反映了用户与用户界面之间的相互作用。jQuery.my 提供了全面的验证,条件格式,复杂的依赖关系,运行形式结构操作。 标签:jQuery

    jQuery的车牌插件

    总之,“jQuery的车牌插件”是一个实用的工具,它通过与jQuery库的结合,解决了在网页上输入车牌号码的用户体验问题,使得这一过程更加高效和便捷。无论是用于汽车相关的业务系统,还是交通管理平台,甚至是个人项目...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织...JQuery插件orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js ...

    angular+jquery+bootstrap后台模板

    在与AngularJS结合的后台模板中,jQuery可能用于处理一些Angular不擅长或者尚未涵盖的DOM操作,如复杂动画效果或与第三方库的集成,以增强用户界面的流畅性。 **Bootstrap**: Bootstrap是Twitter开源的一个前端框架...

    JQuery颜色渐变插件jquery.color.js

    此外,`jquery.color.js`还可以与其他jQuery动画方法结合使用,如`fadeIn`、`fadeOut`等,创建复杂的交互效果。 在实际项目中,`jquery.color.js`常用于制作按钮悬停效果、进度条动画、提示信息显示等。由于其强大...

    jquery甘特图插件开源

    - `js/`: 存放JavaScript源代码和库文件,包括jQuery和甘特图插件的核心文件。 - `data/`: 可能包含示例数据文件,用于填充甘特图。 - `README.md`: 描述了项目的用途、安装方法和使用指南。 为了使用这个插件,你...

    jquery.way.js数据绑定插件

    jQuery Way.js 是一个轻量级的插件,它为 jQuery 提供了数据绑定功能,使得开发者可以更方便地管理DOM元素与JavaScript对象之间的交互。在本文中,我们将深入探讨 Way.js 的核心概念、使用方法以及如何将其集成到您...

    jquery.validate插件remote规则相同值不验证的问题解决办法

    jquery.validate插件remote规则相同值不验证的问题解决办法.方法绝对有效

    jquery文档预览功能插件

    jQuery Zoho Viewer是一款强大的文档预览插件,它允许用户在浏览器内直接预览各种类型的文档,包括但不限于PDF、Word、Excel、PPT等,无需下载或安装额外的软件。该插件由Zoho公司提供,与Zoho Docs服务紧密集成,...

    jQuery手机端HTML5带农历日期选择插件jQuery移动端日历插件swiper.js

    在本文中,我们将深入探讨基于jQuery的手机端HTML5日历插件,它结合了swiper.js库,提供了带有农历功能的万年历解决方案。这款插件适用于开发移动应用,为用户提供直观且易于操作的日历选择体验,类似于百度的万年历...

    jQuery图片预览插件

    - `jquery.lightbox.js`:jQuery lightbox插件的JavaScript实现。 - `README.markdown`:包含了插件的使用指南和API文档。 - `LICENSE.txt`:插件的许可协议,规定了使用和分发的规则。 - `css`:存放插件的样式文件...

    用JQUERY模仿Angularjs的todoList(mvc)

    这种方法更适合对jQuery熟悉但对AngularJS不那么了解的开发者,同时也展示了两种不同框架在实现相同功能时的思路差异。 总结一下,通过这次模仿,我们学习了如何在jQuery中创建一个简单的TodoList应用,包括数据...

    jQuery图片处理插件大全

    FullscreenGalleryThumbnailFlip.zip FullPageImageGallery.zip MergingImageBoxes.zip buildinternet-mosaic-ef45e11.zip woothemes-FlexSlider-23b22ac.zip jcobb-basic-jquery-slider-...等47个jQuery图片特效插件

Global site tag (gtag.js) - Google Analytics