Comment regarder tous les changements sur un Scope dans AngularJS?

Angulaire $de la fonction de veille permet d'événements pour être déclenché lorsque l'attribut spécifié modifications, comme indiqué ci-dessous. C'est une manière similaire à écouter les événements lorsque tout changement arrive sur le champ?

//works
$scope.$watch("someval", function() { }, true);
$scope.$watch(function(scope){ return scope.someval; }, function() { }, true);

//doesn't work
$scope.$watch("this", function() { }, true);
$scope.$watch(function(scope){ return scope; }, function() { }, true);

source d'informationauteur Luke Dennis

  1. 23

    Je crois que vous ne pouvez pas regarder pour les changements sur le $scope (en dehors de l'aide @ValentynShybanov de sugestion). La chose la plus proche que vous pouvez faire est de regarder pour digérer les appels:

    $scope.$watch(function() { 
    console.log("digest called"); 
});

    La fonction ci-dessus sera appelée à chaque fois qu'un $digest est appelé sur le champ, même si il n'y avait pas de changements sur la portée de ses propriétés.

  2. 9

    Qui n'est pas simple, à cause de la portée est un objet ordinaire. Qui est l'épine Dorsale où vous pouvez vous abonner à tous les événements, mais pour que vos modèles devraient étendre une propriétaire interface - Backbone.Model. Angulaire met de côté le pattern observer dans son look classique. C'est une décision de conception inhabituelle. Fondamentalement, il ya une boucle où Angulaire évalue les expressions surveillé et lorsqu'il détecte une différence à partir de l'itération précédente, elle informe les observateurs. Une approche très intéressante, probablement la seule alternative à l'observateur de motif (sauf peut-être réactif de programmationce qui n'est pas encore monnaie courante).

    Je propose de l'utiliser comme une montre expression d'une fonction qui retourne une valeur de hachage de la portée. Malheureusement étendues contiennent des références circulaires quelque sorte des solutions rapides comme JSON.stringify($scope) ne fonctionnent pas. J'ai écrit "rapide et sale" preuve de concept. http://jsfiddle.net/ADukg/2544. Quelle que soit la zone de texte que vous tapez dans l'impression sur la console. Chaîne de fonction de hachage est pris d'ici Générer un Hachage de chaîne de caractères en Javascript/jQuery.

    function MyCtrl($scope) {
    $scope.$watch(
        function($scope) {return hash($scope);},
        function() {console.log("changed");}
    );
}
  3. 3

    J'ai rencontré ce problème moi-même, et je l'ai résolu avec quelque chose de similaire à @ValentynShybanov du commentaire, mais pas tout à fait la même. ma solution ne nécessite pas de préfixe de toutes les propriétés que vous avez dit dans le commentaire.

    voir un travail plunkr

    var entireScope = {};
  for ( var i in $scope ){
    if ( i[0] !== '$' && i !== 'this' && i !== 'constructor'){
      console.log(i);
      entireScope[i] = $scope[i];
    }
  }

  $scope.entireScope = entireScope;

  $scope.$watch('entireScope', function( newValue, oldValue ){
   $log.info('entireScope has changed',newValue, oldValue);
  }, true);

    comme vous le voyez, la solution est tout à fait le même, mais en fait, il ajoute une autre propriété à la portée plutôt que de remplacer la structure que vous avez déjà. cette nouvelle propriété représente l'ensemble de la portée (d'où son nom) et vous pouvez le regarder.

    la boucle que j'ai écrit peut-être trop génériques, vous pouvez la remplacer par une personnalisation de l'initialisation. par exemple: 

    $scope.entireScope = { 'someVal' : $scope.someVal }

    cette solution répond à vos besoins et vous évite la nécessité de refactoriser le code.

  4. 2

    Une solution simple pourrait être que vous devriez vérifier une variable de portée seule, mais elle pourrait être l'objet.

    app.js

    app.controller('MainController', ['$scope', function($scope){
   $scope.watchable = {
       'param1':'',
       'param2':''
   };
   $scope.update = -1;
   $scope.$watch('watchable', function(scope){
       scope.update++;
   }, true);

});

    index.html

    <div ng-controller="MainController">
    <input type='text' ng-model="watchable.param1">
    <input type='text' ng-model="watchable.param2">
    <p>param1:{{watchable.param1}}, param2:{{watchable.param2}}</p>
    <p>update:{{update}}
</div>

    L'astuce ici est de passer à 'true' dans le troisième paramètre de l' $fonction de veille qui va faire un angulaires.l'égalité de vérifier ce qui est de vérifier par valeur plutôt qu'une simple vérification des références. S'il vous plaît laissez-moi savoir si sa bonne.