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 相关文章推荐
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jquery插件格式实例分析
Jun 16 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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
ftp类(example.php)
2006/10/09 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
php swoft框架实例用法
2020/12/22 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
javascript 跨域问题以及解决办法
2017/07/17 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python数组并集交集补集代码实例
2020/02/18 Python
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
小程序自定义轮播图圆点组件
2022/06/25 Javascript