Başlıkta net olarak belirtmiş olduğumuz gibi $scope içerisinde tanımlı property’lerdeki değişiklikleri izlemek isterseniz $watch fonksiyonunu kullanmalısınız.
AngularJS $watch fonksiyonu ile değişkenlerdeki değerlerin değişikliliklerini izleme
$scope içerisinde tanımlı olan property’lerden hangisinin değeri değiştiğinde yakalamak istiyorsak o zaman $watch fonksiyonu ile kullanmalısınız. Şimdi örnekle açıklamaya çalışalım.
Html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html ng-app="demo"> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></ script> <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></ script> <script src="script.js"></ script> </head> <body ng-controller="MainController"> <h1>$watch Uygulaması</h1> <label for="name">Ad</label> <input name="name" type="text" ng-model="name" /> <label for="name">Soyad</label> <input name="name" type="text" ng-model="surname" /> </body> </html> |
$watch fonksiyonu ile ilgili özel olarak html tarafıda herhangi birşey yapmıyoruz sadece verileri bind etmek için ng-app ve ng-controller attribute’leri eklendi ve değişkenler bind edildi.
Javascript
1 2 3 4 5 6 7 8 9 10 | var app = angular.module("demo", []); app.controller("MainController",["$scope", function($scope){ $scope.name = "Murat"; $scope.surname = "Öner"; $scope.$watch("name", function(newValue, oldValue, scope){ console.log("Eski Değer: " + oldValue + " Yeni Değer: " + newValue); }, true); }]); |
$watch fonksiyonunda ilk parametreye izlenecek olan property’inin adı belirtiliyor ardından ikinci parametreye’de callBack fonksiyonu tanımlanıyor callBack fonksiyonunda ilk parametre property’nin yeni değerini ikinci parametre ise değiştirilmeden önceki değerini taşıyor scope ise izlemeye aldığınız değişkenlerin yer aldığı scope’u vermektedir
Watch fonksiyonumuzun 3.parametresi belkide yeri geldiğinde gününüzü kurtaracak bir özelliktir eğer false derseniz ve izlemeye aldığınız nesnenin bir dizi olduğunu varsayarsak bu dizinin yeniden oluşturulma durumunda yani yeni bir eleman eklenmesinde değilde yeni bir dizi ile değiştirilmesinde tetiklenmesini istiyorsanız o zaman false değeri geçmelisiniz ama dizi eleman sayısı dizi elemanlarındaki özelliklerden birinin değeri değiştiğinde v.s. her türlü değişiklikte watch callBack’inize düşmesini isterseniz true değeri geçmelisiniz.
Sonuç
AngularJS $watch Fonksiyonu, AngularJS $watch Fonksiyonu, AngularJS $watch Fonksiyonu
