<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
  <meta charset="utf-8">
  <title>angular時(shí)鐘輔助理解$apply，$digest，$watch</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body ng-controller="myController">

  <div ng-bind="clock.now"></div>


  <script src="../angular.min.js"></script>
  <script>
    angular.module(‘a(chǎn)pp‘, [])
    .controller(‘myController‘, function($scope, $timeout, $interval) {

      // 第一種
      // $scope.clock = {};
      // var clockFunction = function() {
      //   $scope.clock.now = new Date();
      //   $timeout(function() { // 使用$timeout 來代替setTimeout(),因?yàn)榍罢咭呀?jīng)調(diào)用了$apply()
      //     clockFunction();
      //   }, 1000)
      //   // setTimeout(function() {
      //   //   $scope.$apply(clockFunction);
      //   // }, 1000)
      // }
      // clockFunction();

      // 第二種
      $scope.clock = {
         now: new Date()
      };   
      var updateClock = function() {
        $scope.clock.now = new Date();
      };   
      setInterval(function() { // 如果不使用$interval 則需要手動(dòng)調(diào)用$apply(),以使已經(jīng)改變的$scope及時(shí)的更新到view
        $scope.$apply(updateClock);

        // 這里可以看出 $scope已經(jīng)改變但并未及時(shí)更新到view
        // updateClock();
        // console.log($scope.clock.now);
      }, 1000);   
      updateClock();
    })
  </script>
</body>
</html>

準(zhǔn)備開始！

$apply （通知）
$digest（循環(huán)）
$watch（監(jiān)聽）

這里可能與英語的翻譯有所差別，但是這不是重點(diǎn)，重點(diǎn)是讓你能夠理解

angular在監(jiān)聽數(shù)據(jù)變化并執(zhí)行雙向綁定時(shí)一定會(huì)做的事情：

通知（$apply）angular，告訴他有一個(gè)函數(shù)test（$apply(test)），需要他幫忙做下臟檢查（$digest臟檢查），在做臟檢查的同時(shí)監(jiān)聽數(shù)據(jù)變化（$watch）并反映到view中

當(dāng)不在angular上下文中的時(shí)候，則需要你手動(dòng)$apply。如果不做$apply雖然angular能夠監(jiān)聽數(shù)據(jù)變化，但他并不會(huì)將數(shù)據(jù)及時(shí)更新到view，因?yàn)樗⒉恢滥愕臄?shù)據(jù)在什么時(shí)候是最新的

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: