AngularJS中$apply方法和$watch方法用法总结  更新时间:2016年12月13日 10:46:11   作者:郑浩-   这篇文章主要介绍了AngularJS中$apply方法和$watch方法用法,结合实例形式总结分析了$apply方法和$watch方法的功能、参数含义、使用技巧与相关注意事项,需要的朋友可以参考下 本文实例总结了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的值: RunJS {{name}} {{age}} 在上面代码中如果我们不使用$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: RunJS 价格: 个数: 费用: {{sum() | currency:’¥’}} 运费: {{iphone.fre | currency:’¥’}} 总额: {{sum() + iphone.fre | currency:’¥’}} $watch这个函数在项目中会经常用到,所以我们需要对这个函数灵活的掌握,这样我们在自定控件或者完成一些比较复杂的需求的时候很更加的方便。 小结 以上是小编对中两个方法的总结,这些都是比较入门的知识,如果想更好的对这些知识了解还需要我们在项目中好好的研究。 源码地址:http://runjs.cn/code/ovjwuxhn 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: angularJS中$apply()方法详解 Angularjs中的$apply及优化使用详解 Angular项目中$scope.$apply()方法的使用详解 angular4强制刷新视图的方法 对angular 实时更新模板视图的方法$apply详解 AngularJS $apply $watch 相关文章 详解Angular的8个主要构造块 Angular 主要分为八大构造块(也就是八个核心概念):模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下 2017-06-06 Angular2使用Guard和Resolve进行验证和权限控制 本篇文章主要介绍了Angular2使用Guard和Resolve进行验证和权限控制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 angularjs封装$http为factory的方法 本篇文章主要介绍了angularjs封装$http为factory的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 Angular设置title信息解决SEO方面存在问题 爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,下面本文给大家介绍Angular设置title信息解决SEO方面存在问题,需要的朋友可以参考下 2016-08-08 angular实现IM聊天图片发送实例 本篇文章主要介绍了angular实现IM聊天图片发送实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 AngularJS 作用域详解及示例代码 本文主要介绍AngularJS 作用域的知识,这里整理了基础资料,和示例代码以及实现效果图,有需要的小伙伴可以参考下 2016-08-08 angular2路由切换改变页面title的示例代码 本篇文章主要介绍了angular2路由切换改变页面title的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 ng-events类似ionic中Events的angular全局事件 这篇文章主要介绍了ng-events类似ionic中Events的angular全局事件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-09-09 AngularJS基础 ng-value 指令简单示例 本文主要介绍AngularJS ng-value 指令,这里对ng-value 的基础资料做了整理,并附实例代码,有需要的小伙伴可以参考下 2016-08-08 AngularJS遍历获取数组元素的方法示例 这篇文章主要介绍了AngularJS遍历获取数组元素的方法,涉及AngularJS简单的数组遍历及元素获取相关操作技巧,需要的朋友可以参考下 2017-11-11 最新评论

本文实例总结了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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

您可能感兴趣的文章:

  • angularJS中$apply()方法详解
  • Angularjs中的$apply及优化使用详解
  • Angular项目中$scope.$apply()方法的使用详解
  • angular4强制刷新视图的方法
  • 对angular 实时更新模板视图的方法$apply详解
张贴在3