Analyse der Watch-Monitoring-Nutzung in AngularJS-PHP开发-php.cn

Analyse der Watch-Monitoring-Nutzung in AngularJS

高洛峰

Freigeben： 2016-12-07 16:05:25

Original

1234 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Verwendung der Überwachungsüberwachung in AngularJS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

ANGULAR-Überwachungsverwendung:

Wenn sich das Winkeldatenmodell ändert, müssen wir basierend auf seinen Änderungen andere Ereignisse auslösen.

$watch ist eine Scope-Funktion, die auf Modelländerungen wartet. Sie benachrichtigt Sie, wenn sich ein Teil Ihres Modells ändert.

$watch(watchExpression, listener, objectEquality);

Nach dem Login kopieren

Analyse der Watch-Monitoring-Nutzung in 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>

Nach dem Login kopieren

Dieser Code überwacht die Änderung des Namenswerts von $scope, wenn es verändert sich. Zuhören wird ausgelöst.

Überwachungsobjekt:

<!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>

Nach dem Login kopieren

Hier klicken wir auf die Schaltfläche und stellen fest, dass die Überwachung nicht ausgelöst wird, da wir überwachen Das Benutzerobjekt hat sich nicht geändert, aber die Attributwerte haben sich geändert.

Wenn wir Änderungen in Benutzerobjektattributen überwachen möchten, gibt es zwei Methoden.

1. Nutzen Sie eine gründliche Überwachung.

Die Methode ist wie folgt:

<!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>

Nach dem Login kopieren

Auf tiefe Überwachung eingestellt. Solange sich das Objekt ändert, wird die Überwachung ausgelöst .

2. Schreiben Sie direkt den Attributwertpfad des Objekts.

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

Nach dem Login kopieren

Überwachung beseitigen

Zu viel Überwachung im System beeinträchtigt die Leistung des Systems. Wir können nach Erfüllung bestimmter Bedingungen. Überwachung entfernen.

Die Methode zum Entfernen der Überwachung ist wie folgt:

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();

Nach dem Login kopieren

Verwenden Sie die Ereignisübertragung im System.

Beim Überwachen senden wir beispielsweise ein Ereignis an die Außenwelt.

Schreiben Sie die Überwachungsverarbeitungsmethode in die Steuerung:

Das Beispiel lautet wie folgt:

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

Nach dem Login kopieren

Hörcode:

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

Nach dem Login kopieren

Dieser Ansatz wird am besten in Anleitungen verwendet , die Ereignisse übertragen, implementieren die Überwachung im Controller. Der Vorteil liegt in der Wiederverwendung von Code.

Ich hoffe, dass dieser Artikel für alle in der AngularJS-Programmierung hilfreich sein wird.