AngularJS_AngularJS の $watch()、$digest()、$apply() の違い-jsチュートリアル-php.cn

AngularJS_AngularJS の $watch()、$digest()、$apply() の違い

WBOY

リリース： 2016-05-16 15:06:36

オリジナル

1298 人が閲覧しました

AngularJS $scope の $watch()、$digest()、および $apply() は、AngularJS のコア関数です。AngularJS を学習するには、これらの関数を理解する必要があります。

$scope 内の変数をビューにバインドすると、AngularJS は内部的に「ウォッチ」を自動的に作成します。「Watch」は、AngularJS スコープ内の変数の変更を監視するために使用されます。「ウォッチ」は、$scope.$watch() メソッドを呼び出すことで作成できます。

$scope.$digest() 関数は、すべてのウォッチをループし、リッスンしている $scope 内の変数が変更されたかどうかを検出します。変数が変化すると、その変数に対応するリスニング関数が呼び出されます。リスニング関数は、HTML 内のテキストに最新の変数値を表示するなど、さまざまな操作を実行できます。 $scope.$digest がデータバインディングの更新をトリガーできることがわかります。

ほとんどの場合、AngualrJS は $scope.$watch() 関数と $scope.$digest() 関数を自動的に呼び出しますが、場合によっては手動で呼び出す必要があるため、それらがどのように機能するかを理解する必要があります働く。

$scope.$apply() この関数は、最初にコードを実行し、次に $scope.$digest() を呼び出します。すべての時計は一度テストされ、対応するリスニング機能が実行されます。 $scope.$apply() は、AngularJS を他の JavaScript コードと統合するときに役立ちます。

次に、$watch()、$digest()、$apply() について詳しく説明します。

$watch()
$watch(watchExpression, リスナー, [objectEquality])

watchExpression: 監視オブジェクト。文字列または関数（スコープ）にすることができます。{}

リスナー: コールバック関数 function(newVal, oldVal,scope){}

リスニングオブジェクトが変更されたときに実行されます

objectEquality: 深く監視するかどうか。true に設定すると、監視対象オブジェクトのすべてのプロパティ変更をチェックするように Angular に指示されます。単純な値ではなく、配列の個々の要素またはオブジェクトのプロパティを監視したい場合は、これを使用する必要があります。 (デフォルト: false)

$digest()
現在のスコープとサブスコープ内のすべてのウォッチを検出します。これは、リスニング関数が実行中にモデル (スコープ内の変数) を変更し、モデルが変更されなくなるまで $digest() が呼び出され続けるためです。 10 回を超えて呼び出される場合、$digest() はプログラムが無限ループに入るのを防ぐために「最大反復制限を超えました」という例外をスローします。

$apply()
$apply([exp])

exp: 文字列または関数(スコープ){}

$apply() ライフサイクル疑似コード図は次のとおりです

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

ログイン後にコピー

例
以下では、$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 にバインドします。同時に、このバインディングは $scope.date.time の変更を監視する監視を自動的に作成します。さらに、ここには 2 つのボタンがあります。最初のボタンは、ng-click ディレクティブを通じて $scope.updateTime メソッドを呼び出します。その後、AngularJS は $scope.$digest() を自動的に実行して、HTML に最新の時刻を表示します。 2 番目のボタンは、JavaScript コードを通じてクリックイベントを追加し、HTML 内の時間を更新します。ただし、2 番目のボタンは機能しません。解決策は、次のように、クリックイベントの最後に $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();
    }
  );
});

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。