jquery操作angularjs对象


Posted in Javascript onJune 26, 2015

jquery是一个非常强大的js框架,angularjs是一个非常牛的前端mvc框架。虽然用其中的任何一个框架在项目中够用了,但是有时候这两个框架需要混合着用,虽然不推荐。但有时候混合用时,却非常方便,不要考虑那么多,只要能实现功能,何乐而不为?

最近做的一个产品,前端用angularjs,但表格框架用的却是jquery.datatables.js,当然其中少不了碰到jquery与angularjs交互问题。由于公司保密,我就不用真实项目演示了,写个小demo吧,当然真实的项目要复杂得多。

<!DOCTYPE html>
<html ng-app="ngDemo">
<head>
  <title></title>
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
  <script type="text/javascript">
  $(function() {
    $('#btn').on('click',function(e) {
      $('#dv2').text(Number($('#dv2').text())+1);//jquery+angular实现
      $('#dv3').text(Number($('#dv3').text())+1);//纯jquery实现
    });
  });
  
  var app=angular.module('ngDemo',[]);
  app.controller('ngCtrl',['$scope',function ($scope) {
    $scope.test1=0;
    $scope.test2=0;
  }]);
  </script>
</head>
<body ng-controller="ngCtrl">
test1:<div id="dv1">{{test1}}</div><!--纯angular实现-->
test2:<div id="dv2" ng-bind="test2" ng-model="test2"></div>
test3:<div id="dv3">0</div>
<button id="btn" ng-click="test1=test1+1">click me +1</button>
</body>
</html>

代码

jquery操作angularjs对象

效果

jquery操作angularjs对象

点了两次,这三个值都加到2了,貌似没什么问题。

真没问题吗?请看

jquery操作angularjs对象

视图上是2,model上还是0,没有实现同步,怎么办?

那么问题又来了,jquery和angularjs哪家强呢?

改下代码

$('#btn').on('click',function(e) {
      var scope=angular.element('#dv2').scope();//jquery+angular实现
      scope.test2=scope.test2+1;//直接修改test2的值
      console.log(scope.test2);
      $('#dv3').text(Number($('#dv3').text())+1);//纯jquery实现
    });

再看看

jquery操作angularjs对象

点了两次,中间那个变成了1,其它两个是2。

jquery操作angularjs对象

点了3次,中间那个变成了2,但是scope.test2的值却是什么,它怎么总是显示慢一拍?

再改改

$('#btn').on('click',function(e) {
      var scope=angular.element('#dv2').scope();//jquery+angular实现
      scope.test2=scope.test2+1;//直接修改test2的值
      scope.$apply();//绑定到视图
      console.log(scope.test2);
      $('#dv3').text(Number($('#dv3').text())+1);//纯jquery实现
    });

再看看

jquery操作angularjs对象

这下这三个都同步了。中药好,西药快,中本结合!jquery简单,angularjs方便,两者结合...大功告成。

注意:scope对象一定要调用$apply(),否则会出现视图与model不同步。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
jQuery检查事件是否触发的方法
Jun 26 #Javascript
js限制input标签中只能输入中文
Jun 26 #Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 #Javascript
浅谈JavaScript异常处理语句
Jun 26 #Javascript
javascript实现一个数值加法函数
Jun 26 #Javascript
javascript排序函数实现数字排序
Jun 26 #Javascript
javascript实现给定半径求出圆的面积
Jun 26 #Javascript
You might like
javascript操作文本框readOnly
2007/05/15 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python读取oracle函数返回值
2016/07/18 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python内存读写操作示例
2018/07/18 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python speech模块的使用方法
2020/09/09 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
财务部岗位职责
2015/02/03 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
开除通知书范本
2015/04/25 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers