AngularJS中$apply方法和$watch方法用法总结


Posted in Javascript onDecember 13, 2016

本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考,具体如下:

引言

最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化。

$apply使用情景

AngularJS 外部的控制器(DOM 事件、外部的回调函数如 jQuery UI 空间等)调用了AngularJS 函数之后,必须调用$apply。在这种情况下,你需要命令 AngularJS 刷新自已(模型、视图等),$apply就是用来做这件事情的。我们在使用$apply这个方法的时候,只要可以,请把要执行的代码和函数传递给$apply 去执行,而不要自已执行那些函数然后再调用$apply。

下面看一个Demo,写一个定时器在两秒以后改变name的值:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>RunJS</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
  <script src="serviceJS01.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="firstController" ng-click="show()">
{{name}}
  {{age}}
</div>
</body>
</html>
<script>
  var app = angular.module("myApp",[]);
  app.controller('firstController',function($scope,$timeout){
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.name="李四";
      })
    },2000);
    $scope.name="张三";
    $scope.age='10';
    $scope.show=function(){
      $scope.name='点击后的name';
    }
  $timeout(function(){
    $scope.age='50';
  },2000);
  })
</script>

在上面代码中如果我们不使用$apply来传播name值的改变,而是直接将$scope.name="李四"这句代码写在setTimeout函数中,界面上显示的值根本就不会改变。

$watch方法监听module变化

当你的数据模型中某一部分发生变化时,$watch 函数可以向你发出通知。你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数),实际上只要能够被当作属性访问到,或者可以当作一个JavaScript 函数被计算出来,就可以被$watch 函数监控。它的函数签名为:

$watch(watchFn, watchAction, deepWatch)

watchFn参数:这个是我们监听地方目标对象,它是一个带有angular表达式或者函数的字符串;

watchAction参数:这是一个函数或者表达式,当watchFn 发生变化时会被调用。如果是函数的形式,它将会接收到watchFn 的新旧两个值,以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。

deepWatch参数:如果设置为true,这个可选的布尔型参数将会命令Angular 去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。

下面看一个Demo,当费用超过100的时候,运费为0否则运费为10:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>RunJS</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
  <script src="serviceJS01.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="firstController" ng-click="show()">
  <p>价格:<input type="text" ng-model="iphone.money"></p>
  <p>个数:<input type="text" ng-model="iphone.num"></p>
  <p>费用: <span>{{sum() | currency:'¥'}}</span></p>
  <p>运费: <span>{{iphone.fre | currency:'¥'}}</span></p>
  <p>总额: <span>{{sum() + iphone.fre | currency:'¥'}}</span></p>
</div>
</body>
</html>
<script>
  var app = angular.module("myApp",[]);
  app.controller('firstController',function($scope){
  $scope.iphone={
    money:5,
    num:1,
    fre:10
  };
    $scope.sum=function(){
      return $scope.iphone.money * $scope.iphone.num;
    }
    $scope.$watch($scope.sum,function(newValue,oldValue){
      $scope.iphone.fre=newValue>=100?0:10
    })
  })
</script>

$watch这个函数在项目中会经常用到,所以我们需要对这个函数灵活的掌握,这样我们在自定控件或者完成一些比较复杂的需求的时候很更加的方便。

小结

以上是小编对中两个方法的总结,这些都是比较入门的知识,如果想更好的对这些知识了解还需要我们在项目中好好的研究。

源码地址:http://runjs.cn/code/ovjwuxhn

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue.js学习之递归组件
Dec 13 #Javascript
AngularJS过滤器filter用法总结
Dec 13 #Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 #Javascript
AngularJS服务service用法总结
Dec 13 #Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 #Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 #Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 #Javascript
You might like
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
href下载文件根据id取url并下载
2014/05/28 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python算法应用实战之队列详解
2017/02/04 Python
django之session与分页(实例讲解)
2017/11/13 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Pytorch之finetune使用详解
2020/01/18 Python
django 模版关闭转义方式
2020/05/14 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
python中altair可视化库实例用法
2021/01/26 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
班主任工作年限证明
2014/01/12 职场文书
端午节活动策划方案
2014/03/09 职场文书
评职称个人总结
2015/03/05 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书