angular の $watch メソッドの詳細な説明-jsチュートリアル-php.cn

angular の $watch メソッドの詳細な説明

黄舟

リリース： 2017-09-25 10:03:37

オリジナル

1555 人が閲覧しました

ダーティチェックは $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 回変更されると、次のようになります。イベントをトリガーします。

コントローラーのコードは次のとおりです:

var firstController = function ($scope){
    $scope.name=&#39;张三&#39;;
    
    $scope.count=0;
    
    // 监听一个model 当一个model每次改变时 都会触发第2个函数
    $scope.$watch(&#39;name&#39;,function(newValue,oldValue){
 
        ++$scope.count;
 
        if($scope.count > 30){
            $scope.name = &#39;已经大于30次了&#39;;
        }
    });
 
}

ログイン後にコピー

html コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div ng-app="">
 
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改变次数:{{count}}-{{name}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

ログイン後にコピー

実行中のエフェクトは次のとおりです:

最初の 30 回は自由に変更できます:

angular の $watch メソッドの詳細な説明

30回変更後、名前は固定されます「30回以上」の場合:

angular の $watch メソッドの詳細な説明

これは時計の役割であり、モデルが変更されるたびに2番目の機能がトリガーされます。

(4) watch の 3 番目のパラメータ

モニタリングがオブジェクトまたは配列の場合、たとえば:

 $scope.data = {
        name :&#39;李四&#39;,
        count:20
    }

ログイン後にコピー

このとき、データ内の名前とカウントの両方をモニタリングする必要がある場合、次のように記述できます:

 $scope.$watch(&#39;data&#39;,function(){
 
    },true)

ログイン後にコピー

3 番目のパラメーターを追加しない場合、データのみが監視され、データ参照が変更された場合にのみトリガーされます。

したがって、いくつかの参照オブジェクトを監視する必要がある場合は、3 番目のパラメーターを true に設定する必要があります。

以上がangular の $watch メソッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

angular の $watch メソッドの詳細な説明