AngularJS i $watch

facebooktwittergoogle_plusredditpinterestlinkedinmail

Jak działa $watch?

Dostępna wraz ze $scope’em metoda $watch, umożliwia nam nasłuchiwanie na zmiany własności naszego $scope’a i wykonanie jakiegoś kodu, gdy taka zmiana nastąpi.

index.html

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 <script type="text/javascript" src="js/angular.js"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </head>
 <body ng-app="exApp">
 <div ng-controller="exController">
 <p>{{ name }}</p>
 <input type="text" ng-model="name" />
 </div>
 </body>
</html>

W pliku index.html dodaliśmy tag input z atrybutem ng-model. Wartość ng-model wskazuje na własność naszego $scope’a, na który będziemy mogli wpływać przy pomocy dodanego input’a.

app.js

angular.module('exApp', []);  
angular.module('exApp').controller('exController', [ 
    '$scope', 
    function ($scope) { 
        $scope.$watch('name', function (value) {
            console.log(value); 
        }); 
        $scope.name = "John"; 
    } 
]);

Do konstruktora kontrolera dodaliśmy wywołanie metody $watch. Pierwszym argumentem metody $watch jest nazwa własności, na którego zmiany chcemy nasłuchiwać, natomiast drugim funkcja, która ma zostać odpalona, gdy taka zmiana nastąpi. Funkcja zostanie wywołana z dwoma argumentami, nową i starą wartością naszej własności, którego wartość ulegnie zmianie. Nasza funkcja zostanie wywołana tylko wtedy, gdy stara i nowa wartość będą się różnić między sobą.

Możemy także nasłuchiwać na określone właściwości obiektów, które są własnością naszego $scope.

angular.module('exApp', []);  
angular.module('exApp').controller('exController', [ 
    '$scope', 
    function ($scope) { 
        $scope.$watch('person.name', function (value) {
            console.log(value); 
        }); 
        $scope.person = {
            name: "John",
            age: "26"
        }; 
    } 
]);

Jeśli wartością $scope’a, na którego zmiany chcemy nasłuchiwać, jest cały obiekt lub tablica, do metody $watch dodajemy trzeci argument o wartości true. Argument ten sprawi, że Angular będzie robił głębokie porównanie obu wartości, zamiast sprawdzać, czy nowa i stara wartość odnoszą się do tej samej instancji obiektu lub tablicy.

angular.module('exApp', []);
angular.module('exApp').controller('exController', [
    '$scope',
    function ($scope) {
        $scope.$watch('person', function (value) {
            console.log(value);
        }, true);
        $scope.person = {
            name: "John",
            age: "26"
        };
    }
]);

Od wersji 1.4.x Angular’a, mamy do dyspozycji metodę $watchCollection, która robi głębokie porównywanie tak jak przykład z trzecim argumentem metody $watch. Z tą różnicą, że metoda $watchCollection jest wydajniejsza i szybsza.

angular.module('exApp', []);
angular.module('exApp').controller('exController', [
    '$scope',
    function ($scope) {
        $scope.$watchCollection('person', function (value) {
            console.log(value);
        });
        $scope.person = {
            name: "John",
            age: "26"
        };
    }
]);

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

− 5 = 4

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>