ホームページ > 記事 > ウェブフロントエンド > angularの$watchメソッドの詳しい説明
angularの$watchメソッドの詳しい説明
- 一个新手オリジナル
- 2017-10-06 10:40:072102ブラウズ
ダーティ チェックは $apply メソッドで説明されています。まず、apply メソッドは evel メソッドをトリガーし、evel メソッドが正常に解析されると、digest メソッドがトリガーされ、digest メソッドが watch メソッドをトリガーします。
(1) $watch の概要
ダイジェストが実行されるとき、watch によって観測された値が前回の実行と異なる場合、ダイジェストがトリガーされます。
AngularJS 内のウォッチにより、モデルに合わせてページを更新できます。
$watch メソッドは主にオブジェクトを手動で監視するために使用されますが、オブジェクトが変更されるとイベントがトリガーされます。
(2)watchメソッドの使い方
$watch(watchFn,watchAction,deepWatch)
watchFn: 角度式または関数の文字列
watchAction(newValue,oldValue,scope): watchFnが変更されると呼び出されます
deepWatch : 監視対象オブジェクトの各属性が変更されたかどうかを確認するためのオプションのブール コマンド
$watch は関数を返します。この監視を登録解除したい場合は、関数
(3) の例を使用できます
前の例では、名前の形式が 30 回変更されると、イベントがトリガーされます。
コントローラーのコードは以下のとおりです: 0
| 13 14 15 16 var firstController = function ($scope){
$scope.n
ame='张三';
$scope.count=0;
// 监听一个model 当一个model每次改变时 都会触发第2个函数
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if($scope.count > 30){
$scope.name = '已经大于30次了';
}
});
}
HTMLコードは次のとおりです: 2 3 4 5 6 7 8 | 9
10 |
16171 8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p ng-app="">
<p ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
改变次数:{{count}}-{{name}}
</p>
</p>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
手術効果は次のとおりです: トップ 30 回数は自由に変更できます:
30 回変更されると、名前は「30 回を超えている」に固定されます: これが役割です時計のモデルが変わるたびに、2 番目の機能がトリガーされます。 (4) watch の 3 番目のパラメータ 監視対象オブジェクトがオブジェクトまたは配列の場合、たとえば、1 2 | 34 |
$scope.data = {
name :'李四',
count:20
}
このとき、データ内の名前と数を監視する必要があるため、次のように記述できます。 3 番目のパラメーターを追加し、次にデータ参照が変更された場合にのみトリガーされるモニター データのみを追加します。 
以上がangularの$watchメソッドの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。