Perbezaan antara $watch(), $digest() dan $apply() dalam AngularJS

Perbezaan antara $watch(), $digest() dan $apply() dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:06:36

asal

1346 orang telah melayarinya

$watch(), $digest() dan $apply() dalam AngularJS $scope ialah fungsi teras AngularJS Anda mesti memahami fungsi ini untuk mempelajari AngularJS.

Apabila mengikat pembolehubah dalam $scope untuk dilihat, AngularJS secara automatik mencipta "Tonton" secara dalaman. "Tonton" digunakan untuk memantau perubahan dalam pembolehubah dalam skop AngularJS. "Tonton" boleh dibuat dengan memanggil kaedah $scope.$watch().

Fungsi $scope.$digest() akan melingkar melalui semua jam tangan dan mengesan sama ada pembolehubah dalam $scope yang didengarinya telah berubah. Jika pembolehubah berubah, fungsi mendengar yang sepadan dengan pembolehubah akan dipanggil. Fungsi mendengar boleh melakukan banyak operasi, seperti membiarkan teks dalam HTML memaparkan nilai pembolehubah terkini. Ia boleh dilihat bahawa $scope.$digest boleh mencetuskan kemas kini mengikat data.

Dalam kebanyakan kes, AngualrJS secara automatik akan memanggil fungsi $scope.$watch() dan $scope.$digest(), tetapi dalam beberapa kes, kita perlu memanggilnya secara manual, jadi anda perlu memahami cara ia berfungsi bekerja.

$scope.$apply() Fungsi ini mula-mula akan melaksanakan beberapa kod dan kemudian memanggil $scope.$digest(). Semua jam tangan akan diuji sekali dan fungsi mendengar yang sepadan akan dilaksanakan. $scope.$apply() berguna apabila menyepadukan AngularJS dengan kod JavaScript lain.

Seterusnya kami akan menerangkan $watch(), $digest() dan $apply() secara terperinci.

$watch()
$watch(watchExpression, pendengar, [objectEquality])

watchExpression: objek pemantauan, yang boleh berupa rentetan atau fungsi(skop){}

pendengar: fungsi fungsi panggil balik(newVal, oldVal, skop){}

dilaksanakan apabila objek mendengar berubah

objectEquality: Sama ada untuk memantau secara mendalam Jika ditetapkan kepada benar, ia memberitahu Angular untuk menyemak setiap perubahan sifat dalam objek yang dipantau. Anda harus menggunakan ini jika anda ingin memantau elemen individu tatasusunan atau sifat objek dan bukannya nilai biasa. (Lalai: palsu)

$digest()
Kesan semua jam tangan dalam skop dan sub-skop semasa, kerana fungsi mendengar akan mengubah suai model (pembolehubah dalam skop) semasa pelaksanaan dan $digest() akan terus dipanggil sehingga model tidak berubah lagi. Apabila dipanggil lebih daripada 10 kali, $digest() akan membuang pengecualian "Had lelaran maksimum melebihi' untuk menghalang atur cara daripada memasuki gelung tak terhingga.

$apply()
$apply([exp])

exp: rentetan atau fungsi(skop){}

Rajah pseudokod kitaran hayat $apply() adalah seperti berikut

function $apply(expr) {
 try {
  return $eval(expr);
 } catch (e) {
  $exceptionHandler(e);
 } finally {
  $root.$digest();
 }
}

Salin selepas log masuk

Contoh
Di bawah kami menggunakan contoh untuk menggambarkan $watch, $digest dan $apply.

<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
  $scope.data = { time : new Date() };
  $scope.updateTime = function() {
    $scope.data.time = new Date();
  }
   
  document.getElementById("updateTimeButton")
      .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
  });
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
  {{data.time}}
 
  <br/>
  <button ng-click="updateTime()">update time - ng-click</button>
  <button id="updateTimeButton" >update time</button>
</div>
</body>

Salin selepas log masuk

Kod ini akan mengikat $scope.data.time ke HTML untuk paparan Pada masa yang sama, binding ini akan membuat jam tangan secara automatik untuk memantau perubahan dalam $scope.date.time. Selain itu, terdapat 2 butang di sini Butang pertama memanggil kaedah $scope.updateTime melalui Arahan ng-click Selepas itu, AngularJS akan secara automatik melaksanakan $scope.$digest() untuk memaparkan masa terkini dalam HTML. Butang kedua menambah acara klik melalui kod javascript untuk mengemas kini masa dalam HTML. Tetapi butang kedua tidak berfungsi. Penyelesaiannya adalah dengan memanggil kaedah $scope.$digest() secara manual pada akhir acara klik, seperti berikut:

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  console.log("update time clicked");
  $scope.data.time = new Date();
  $scope.$digest();
});

Salin selepas log masuk

Penyelesaian lain ialah memanggil $scope.$apply(), seperti berikut:

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.