Bab 5 $watch, $digest dan $apply
Sudah kita pelajari bersama pada bab – bab awal bahwa ketika ada perubahan nilai pada view maka perubahan juga akan terjadi pada scope yang ada di controller dan begitu juga sebaliknya ketika nilai scope di controller berubah maka perubahan pada view pun akan terjadi juga.
Kemampuan Angular untuk melakukan hal – hal tersebut berhubungan dengan method – method yang dimiliknya yaitu $watch, $digest dan $apply. Secara umum, $watch dan $digest akan dijalankan secara automatis oleh Angular untuk memperbaharui nilai tetapi ada kondisi dimana kita harus menggunakannya secara manual untuk mengupdate nilai.
5.1 $watch
$watch berfungsi untuk mengawasi perubahan nilai yang terjadi pada sebuah variabel di scope. Parameter pertama dari method ini adalah string dari nama variabel yang akan diawasi kemudian parameter kedua adalah berupa fungsi yang akan dijalankan (listener) ketika nilai yang diawasi berubah.
Saya sertakan potongan kode contoh di bawah ini untuk memahami cara kerja $watch.
<body ng-app='AngularWatchApp' ng-controller='MainController'>
<input type='text' ng-model='book'/>
<div>
{{book}}
</div>
<div>
Book has been changed {{count}} times.
</div>
<!-- include .js here -–!>
</body>
Halaman di atas akan memunculkan teks masukan yang nilainya langsung dimunculkan di bawahnya. Kita akan memunculkan angka berapa kali nilai sudah diubah dengan menggunakan $watch. Pada controller berikut adalah kodenya.
app.controller('MainController', function($scope){
$scope.book = 'Zero to One';
$scope.count = 0;
$scope.$watch('book', function(newValue, oldValue){
$scope.count = $scope.count + 1;
})
});
Coba jalankan dan ubah nilai yang ada pada teks masukan maka setiap perubahan yang terjadi akan membuat nilai dari counter bertambah.
5.2 $digest
Method ini bekerja dengan cara berkeliling ke semua watch yang ada. Ketika berkeliling nyamperin tiap watch, dia ngecek apakah nilai yang diawasi si watch ini berubah atau tidak, jika berubah maka dia manggil fungsi yang jadi parameter kedua dari si watch (fungsi listener).
Ada suatu kasus dimana kita harus memanggil $digest supaya nilai dari variabel bisa terupdate. Pada kasus tertentu saat melakukan proses data binding ada data terbaru yang tidak terupdate maka kondisi seperti ini biasanya karena $digest tidak jalan secara automatis dan kita harus menjalankannya secara manual.
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.dunia='Saya diklik';
scope.$digest();
});
}
Contoh kode di atas saya ambil dari kode saat kita belajar bersama materi directive. Coba jalankan kode yang ada pada materi tersebut tetapi dengan menghilangkan baris scope.$digest() maka variabel dunia yang berisi saya diklik tidak akan muncul di-view. Hal ini terjadi karena $digest tidak jalan karena kode ini berada diluar jangkauan langsung dari $scope yang ada di controller.
5.3 $apply
Kalau saya bilang method ini merupakan penyederhanaan dari penggunaan $digest. $apply menjalankan fungsi yang menjadi parameternya kemudian secara automatis dia akan menjalankan $digest. Dengan pengertian ini maka kode sebelumnya bisa diubah menjadi seperti ini.
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function(){
scope.dunia='Saya diklik';
});
});
}