AngularJS中的$watch()，$digest()和$apply()区分

站长资源 2024/12/1 佚名

2 0 1

AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数，学习AngularJS必须理解这几个函数。

在绑定$scope中的变量到view的时候，AngularJS自动在内部创建一个"Watch"。"Watch"用于监听AngularJS scope中变量的改变。可以通过调用$scope.$watch()这个方法来创建"Watch"。

$scope.$digest()函数会循环访问所有的watches，并检测其所监听的$scope中的变量是否改变。如果变量发生改变，会调用该变量对应的监听函数。监听函数可以实现很多操作，比如让html里面的text文本显示最新的变量值。可见，$scope.$digest是可以触发数据绑定更新的。

大部分情况下，AngualrJS会自动调用$scope.$watch()和$scope.$digest()函数，但是在某些情况下，我们需要手动调用他们，因此，有必要了解他们是怎么工作的。

$scope.$apply()这个函数会先执行一些代码，之后在调用$scope.$digest()。所有的watches会被检测一次，相应的监听函数也会被执行。$scope.$apply()在AngularJS与其它javascript代码集成时是很有用的。

接下来我们具体的讲解下$watch(), $digest() 和 $apply()。

$watch()
$watch(watchExpression, listener, [objectEquality])

watchExpression：监听对象，可以是string或者function(scope){}

listener：监听对象发生改变时执行的回调函数function(newVal,oldVal,scope){}

objectEquality：是否深度监听，如果设置为true，它告诉Angular检查所监控的对象中每一个属性的变化。如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。（默认值：false）

$digest()
检测当前scope以及子scope中所有的watches，因为监听函数会在执行过程中修改model(scope中的变量)，$digest()会一直被调用直到model没有再变。当调用超过10次时，$digest()会抛出一个异常"Maximum iteration limit exceeded'，以此来防止程序进入一个死循环。

$apply()
$apply([exp])

exp：string或者function(scope){}

$apply()生命周期伪代码示意图如下

function $apply(expr) {
 try {
  return $eval(expr);
 } catch (e) {
  $exceptionHandler(e);
 } finally {
  $root.$digest();
 }
}

Example
下面我们通过一个例子来说明$watch,$digest和$apply。

<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
  $scope.data = { time : new Date() };
  $scope.updateTime = function() {
    $scope.data.time = new Date();
  }
   
  document.getElementById("updateTimeButton")
      .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
  });
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
  {{data.time}}
 
  <br/>
  <button ng-click="updateTime()">update time - ng-click</button>
  <button id="updateTimeButton" >update time</button>
</div>
</body>

这段代码会绑定$scope.data.time到HTML中显示出来，同时这个绑定会自动创建一个watch来监听$scope.date.time的变化。此外，这里还有2个按钮，第一个按钮是通过ng-click Directive来调用$scope.updateTime方法，之后AngularJS会自动执行$scope.$digest()使最新的时间显示到HTML中。第二个按钮是通过javascript代码添加一个点击事件，以此来更新HTML中的时间。但是第二个按钮是不能工作的，它的解决办法是在点击事件的最后手动的去调用$scope.$digest()方法，如下：

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  console.log("update time clicked");
  $scope.data.time = new Date();
  $scope.$digest();
});

另外一个解决办法是调用$scope.$apply()，如下：

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

以上就是本文的全部内容，希望对大家的学习有所帮助。

AngularJS,$watch(),$digest(),$apply()

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“AngularJS中的$watch()，$digest()和$apply()区分”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月01日

AngularJS中的$watch()，$digest()和$apply()区分

纯js实现手风琴效果

Angular 根据 service 的状态更新 directive

评论“AngularJS中的$watch()，$digest()和$apply()区分”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接