AngularJSにおける$applyメソッドと$watchメソッドの使い方のまとめ

この例では,AngularJSにおける$apply法と$watch法の用法をまとめた.皆さんの参考にしてください.具体的には以下の通りです.
引用する
最近、プロジェクトでコントロールをカプセル化する際に$watchメソッドを使用してmoduleの値の変化を傍受していましたが、当時編集者はこのメソッドについてよく知らなかったので、ネット上でいくつかの資料を探して勉強しました.以下、AngularJSのScopeが$applyメソッドに提供してModelの変化と$watchメソッドがmoduleの変化を傍受することを簡単に紹介します.
$apply使用シナリオ
AngularJS外部のコントローラ(DOMイベント、jQuery UIスペースなど外部のコールバック関数)がAngularJS関数を呼び出した後、$applyを呼び出す必要があります.この場合、自分(モデル、ビューなど)を更新するようにAngularJSに命令する必要があります.$applyはこのことをするために使用されます.私たちは$applyという方法を使用するとき、できる限り、実行するコードと関数を$applyに渡して実行し、それらの関数を自分で実行してから$applyを呼び出さないでください.
次にDemoを見て、タイマが2秒後にnameの値を変更することを書きます.

  
  
  
  
  



{{name}}
  {{age}}




  var app = angular.module("myApp",[]);
  app.controller('firstController',function($scope,$timeout){
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.name=" ";
      })
    },2000);
    $scope.name=" ";
    $scope.age='10';
    $scope.show=function(){
      $scope.name=' name';
    }
  $timeout(function(){
    $scope.age='50';
  },2000);
  })

上記のコードでは、$applyを使用してname値の変更を伝播するのではなく、$scopeを直接伝播する.name=「李四」というコードはsettimeout関数に書かれており、インタフェースに表示される値はまったく変わりません.
$watchメソッドmodule変化のリスニング
データ・モデルの一部が変化すると、$watch関数が通知されます.個々のオブジェクトのプロパティを監視したり、計算する必要がある結果(関数)を監視したりすることができます.実際には、プロパティとしてアクセスできるか、JavaScript関数として計算できる限り、$watch関数で監視できます.関数の署名は次のとおりです.

$watch(watchFn, watchAction, deepWatch)

watchFnパラメータ:angular式または関数を持つ文字列であるローカルターゲットオブジェクトをリスニングします.
watchActionパラメータ:watchFnが変化すると呼び出される関数または式です.関数の形式の場合、watchFnの新しい値と古い値、および役割ドメインオブジェクトの参照が受信されます.関数の署名はfunction(newValue,oldValue,scope)です.
deepWatchパラメータ:trueに設定すると、このオプションのブール型パラメータは、監視対象オブジェクトの各プロパティが変化しているかどうかを確認するようにAngularに命令します.このパラメータは、単純な値だけでなく、配列内の要素、またはオブジェクト上のすべての属性を監視したい場合に使用できます.
次のDemoを見てみましょう.費用が100を超えた場合、運賃は0です.そうしないと運賃は10です.

  
  
  
  
  



  
 ：
  
 ：
  
 ： {{sum() | currency:'￥'}}
  
 ： {{iphone.fre | currency:'￥'}}
  
 ： {{sum() + iphone.fre | currency:'￥'}}




  var app = angular.module("myApp",[]);
  app.controller('firstController',function($scope){
  $scope.iphone={
    money:5,
    num:1,
    fre:10
  };
    $scope.sum=function(){
      return $scope.iphone.money * $scope.iphone.num;
    }
    $scope.$watch($scope.sum,function(newValue,oldValue){
      $scope.iphone.fre=newValue>=100?0:10
    })
  })

$watchという関数はプロジェクトでよく使われるので、この関数を柔軟に把握する必要があります.そうすれば、コントロールをカスタマイズしたり、複雑なニーズを完成したりするときに便利になります.
小結
以上は小編対の中の2つの方法の総括で、これらはすべて比較的に入門する知識で、もしもっと良いこれらの知識に対して理解するためには私たちがプロジェクトの中でよく研究する必要があります.
ソースアドレス:http://runjs.cn/code/ovjwuxhn
AngularJSに関する詳細については、「AngularJS入門と進級チュートリアル」および「AngularJS MVCアーキテクチャ概要」のトピックを参照してください.
本稿では、AngularJSプログラムの設計に役立つことを期待しています.