AngularJS $apply与$watch方法用法及示例

AngularJS $apply与$watch方法详解

本文总结了AngularJS框架中$apply与$watch两个核心方法的实际应用，旨在为开发者提供参考。

引言

在近期封装控件的项目实践中，笔者使用了$watch方法来监听模块中数值的变化。由于对该方法理解尚浅，通过查阅资料进行了深入学习。下文将简要介绍AngularJS中Scope提供的$apply方法如何传播模型变化，以及$watch方法如何监听模块变化。

$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方法监听模块变化

当数据模型中的某一部分发生变化时，$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和$watch方法详解

AngularJS $apply与$watch方法详解

$apply使用场景

$watch方法监听模块变化

小结

实用工具推荐