AngularJS での監視監視の使用状況の分析-PHP开发-php.cn

AngularJS での監視監視の使用状況の分析

高洛峰

リリース： 2016-12-07 16:05:25

オリジナル

1266 人が閲覧しました

この記事の例では、AngularJS での監視モニタリングの使用方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

ANGULAR モニタリングの使用法:

Angular データモデルが変更されると、その変更に基づいて他のイベントをトリガーする必要があります。

$watch はモデルの変更をリッスンするために使用されるスコープ関数であり、モデルの一部が変更されたときに通知します。

$watch(watchExpression, listener, objectEquality);

ログイン後にコピー

AngularJS での監視監視の使用状況の分析

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller(&#39;MainCtrl&#39;, function($scope) {
  $scope.name = "Angular";
  $scope.updated = -1;
  $scope.$watch(&#39;name&#39;, function(newValue, oldValue) {
   if (newValue === oldValue) { return; } // AKA first run
   $scope.updated++;
  });
  var i=0;
  $scope.getScope=function(){
   // console.info(this);
   var obj=$("#btnTest");
   i++;
   angular.element( obj).scope().name="hello" +i;
  }
 });
</script>
<body ng-controller="MainCtrl">
 <input ng-model="name" />
 Name updated: {{updated}} times.
 <button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>

ログイン後にコピー

このコードは、$scope の name 値の変更を監視し、変更がある場合は監視をトリガーします。

監視オブジェクト:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller(&#39;MainCtrl&#39;, function($scope) {
 $scope.user = { name: "Fox" };
  $scope.updated = -1;
  var watch=$scope.$watch(&#39;user&#39;, function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast(&#39;userUpdate&#39;, newValue.name);
  });
  //watch();
  var i=0;
  $scope.$on(&#39;userUpdate&#39;,function(d,data){
   console.info(data);
  })
  $scope.getScope=function(){
   // console.info(this);
   var obj=$("#btnTest");
   i++;
   angular.element( obj).scope().user.name="hello" +i;
  }
 });
</script>
<body ng-controller="MainCtrl">
 <input ng-model="user.name" />
 Name updated: {{updated}} times.
 <button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>

ログイン後にコピー

ここでボタンをクリックすると、監視がトリガーされないことがわかります。その理由は、このユーザーオブジェクトを監視しているためですが、属性値は変更されていません。変更されました。

ユーザーオブジェクトの属性の変化を監視したい場合、2つの方法があります。

1. 詳細なモニタリングを使用します。

方法は次のとおりです:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller(&#39;MainCtrl&#39;, function($scope) {
 $scope.user = { name: "Fox" };
  $scope.updated = -1;
  var watch=$scope.$watch(&#39;user&#39;, function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast(&#39;userUpdate&#39;, newValue.name);
  },true);
  //watch();
  var i=0;
  $scope.$on(&#39;userUpdate&#39;,function(d,data){
   console.info(data);
  })
  $scope.getScope=function(){
   // console.info(this);
   var obj=$("#btnTest");
   i++;
   angular.element( obj).scope().user.name="hello" +i;
  }
 });
</script>
<body ng-controller="MainCtrl">
 <input ng-model="user.name" />
 Name updated: {{updated}} times.
 <button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>

ログイン後にコピー

オブジェクトが変化する限り、モニタリングがトリガーされます。

2. オブジェクトの属性値のパスを直接記述します。

var watch=$scope.$watch(&#39;user.name&#39;, function(newValue, oldValue) {
//具体代码就不全部写了。

ログイン後にコピー

監視を削除します

システム内の監視が多すぎると、システムのパフォーマンスに影響します。特定の条件が満たされた後、監視を削除できます。

監視を解除する方法は以下の通りです:

var watch=$scope.$watch(&#39;user&#39;, function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast(&#39;userUpdate&#39;, newValue.name);
  },true);
//去掉监听。
watch();

ログイン後にコピー

システム内のイベントブロードキャストを使用します。

例えば、監視する場合、外部にイベントをブロードキャストし、

コントロールに監視処理メソッドを書きます:

例は以下の通りです:

$scope.$broadcast(&#39;userUpdate&#39;, newValue.name);

ログイン後にコピー

監視コード:

$scope.$on(&#39;userUpdate&#39;,function(d,data){
 console.info(data);
})

ログイン後にコピー

このアプローチは最も効果的です。命令で使用したり、命令でイベントをブロードキャストしたり、コントローラーでモニタリングを実装したりするのが簡単です。利点はコードを再利用できることです。

この記事が AngularJS プログラミングに携わるすべての人に役立つことを願っています。