AngularJS : Comment regarder du service des variables?

Dans un tel scénario, où plusieurs/unkown objets pourraient être intéressés par les changements, utilisez $rootScope.$broadcast de l'élément en cours de modification.

Plutôt que de créer votre propre registre des auditeurs (qui doivent être nettoyés sur divers $détruit), vous devez être en mesure de $broadcast à partir du service en question.

Vous devez toujours le code de la $on gestionnaires dans chaque auditeur, mais le motif est découplée de multiples appels à $digest et évite donc le risque de longue watchers.

De cette façon, aussi, les auditeurs peuvent aller et venir de l' DOM et/ou différent de l'enfant étendues sans le service de changement de comportement.

** mise à jour: exemples **

Émissions ferait le plus de sens dans l'onglet "global" des services qui pourraient avoir un impact d'innombrables autres choses dans votre application. Un bon exemple est celui d'un Utilisateur de service où il y a un certain nombre d'événements qui pourraient avoir lieu tel que la connexion, la déconnexion, la mise à jour, ralenti, etc. Je crois que c'est où les émissions ont le plus de sens parce que tout peut écouter un événement, sans même l'injection du service, et il n'a pas besoin d'évaluer toutes les expressions ou mettre en cache les résultats d'inspecter pour des changements. Il vient de feux et oublie (donc, assurez-sûr que c'est un feu-et-oublier de notification, et non pas quelque chose qui nécessite une action)

.factory('UserService', [ '$rootScope', function($rootScope) {
   var service = <whatever you do for the object>

   service.save = function(data) {
     .. validate data and update model ..
     //notify listeners and provide the data that changed [optional]
     $rootScope.$broadcast('user:updated',data);
   }

   //alternatively, create a callback function and $broadcast from there if making an ajax call

   return service;
}]);

Le service ci-dessus serait de diffuser un message à tous les portée lors de la save() la fonction s'est terminée et que les données soient valides. Sinon, si c'est un $ressource ou une soumission ajax, déplacer la diffusion d'appels à la fonction de rappel de sorte qu'il se déclenche lorsque le serveur a répondu. Émissions en fonction de ce modèle particulièrement bien parce que chaque auditeur attend simplement la manifestation sans la nécessité de contrôler la portée sur chaque $digest. L'auditeur pourrait ressembler à:

.controller('UserCtrl', [ 'UserService', '$scope', function(UserService, $scope) {

  var user = UserService.getUser();

  //if you don't want to expose the actual object in your scope you could expose just the values, or derive a value for your purposes
   $scope.name = user.firstname + ' ' +user.lastname;

   $scope.$on('user:updated', function(event,data) {
     //you could inspect the data to see if what you care about changed, or just update your own scope
     $scope.name = user.firstname + ' ' + user.lastname;
   });

   //different event names let you group your code and logic by what happened
   $scope.$on('user:logout', function(event,data) {
     .. do something differently entirely ..
   });

 }]);

L'un des avantages de ceci est l'élimination de plusieurs montres. Si vous étiez en combinant les champs ou en découlant, des valeurs comme l'exemple ci-dessus, vous devez regarder à la fois les propriétés firstname et lastname. Regarder le getUser() la fonction ne fonctionne que si l'utilisateur de l'objet a été remplacé sur les mises à jour, il ne serait pas le feu si l'utilisateur de l'objet seulement de ses propriétés de mise à jour. Dans ce cas, vous auriez à faire une profonde regarder et ce qui est de plus en plus intensive.

$de diffusion envoie le message de la portée, il est appelé à descendre dans n'importe quel enfant étendues. Donc l'appeler à partir de $rootScope le feu sur chaque portée. Si vous étiez à $diffusé à partir de votre contrôleur du champ d'application, par exemple, il serait de feu que dans les étendues qui héritent de votre contrôleur de portée. $émettent va dans le sens inverse et se comporte de façon similaire à un DOM événement en ce qu'il les bulles du champ d'application de la chaîne.

Garder à l'esprit qu'il existe des scénarios où $de diffusion fait beaucoup de sens, et il existe des scénarios où $watch est une meilleure option, surtout si dans un isolat portée avec une très montre spécifique de l'expression.

Sans montres ou de l'observateur rappels (http://jsfiddle.net/zymotik/853wvv7s/):

JavaScript:

angular.module("Demo", [])
    .factory("DemoService", function($timeout) {

        function DemoService() {
            var self = this;
            self.name = "Demo Service";

            self.count = 0;

            self.counter = function(){
                self.count++;
                $timeout(self.counter, 1000);
            }

            self.addOneHundred = function(){
                self.count+=100;
            }

            self.counter();
        }

        return new DemoService();

    })
    .controller("DemoController", function($scope, DemoService) {

        $scope.service = DemoService;

        $scope.minusOneHundred = function() {
            DemoService.count -= 100;
        }

    });

HTML

<div ng-app="Demo" ng-controller="DemoController">
    <div>
        <h4>{{service.name}}</h4>
        <p>Count: {{service.count}}</p>
    </div>
</div>

Ce JavaScript fonctionne comme nous le passage d'un objet de retour de service plutôt qu'une valeur. Lorsqu'un objet JavaScript est retourné à partir d'un service, Angulaire ajoute des montres de toutes ses propriétés.

Également noter que j'utilise la var self = this "comme j'ai besoin de garder une référence à l'objet d'origine lorsque l' $timeout s'exécute, sinon" il " fera référence à l'objet window.

Je suis tombé sur cette question, à la recherche de quelque chose de similaire, mais je pense qu'il mérite une explication approfondie de ce qui se passe, ainsi que des solutions supplémentaires.

Quand angulaire d'expression tels que celui que vous avez utilisé est présent dans le code HTML, Angulaire établit automatiquement une $watch pour $scope.foo, et permettra de mettre à jour le code HTML à chaque fois que $scope.foo changements.

<div ng-controller="FooCtrl">
  <div ng-repeat="item in foo">{{ item }}</div>
</div>

Le non-dit problème ici est que l'une des deux choses affectent aService.foo tels que les changements ne sont pas détectées. Ces deux possibilités sont:

1. aService.foo est à un nouveau tableau à chaque fois, causant la référence est dépassée.
2. aService.foo est en cours de mise à jour d'une façon telle qu'un $digest cycle n'est pas déclenché sur la mise à jour.

---

Problème 1: Les Références Obsolètes

Compte tenu de la première possibilité, en supposant un $digest, si aService.foo était toujours le même tableau, le définir automatiquement $watch permettrait de détecter les changements, comme le montre l'extrait de code ci-dessous.

Solution 1-a: assurez-vous que le tableau ou l'objet est la même objet sur chaque mise à jour

JS:

angular.module('myApp', [])
  .factory('aService', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      //Create a new array on each update, appending the previous items and 
      //adding one new item each time
      $interval(function() {
        if (service.foo.length < 10) {
          var newArray = []
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .factory('aService2', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      //Keep the same array, just add new items on each update
      $interval(function() {
        if (service.foo.length < 10) {
          service.foo.push(Math.random());
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    'aService2',
    function FooCtrl($scope, aService, aService2) {
      $scope.foo = aService.foo;
      $scope.foo2 = aService2.foo;
    }
  ]);

HTML:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Array changes on each update</h1>
    <div ng-repeat="item in foo">{{ item }}</div>
    <h1>Array is the same on each udpate</h1>
    <div ng-repeat="item in foo2">{{ item }}</div>
  </div>
</body>

</html>

Comme vous pouvez le voir, le ng-repeat soi-disant attaché à aService.foo ne met pas à jour lorsque aService.foo changements, mais la ng-repeat attaché à aService2.foo ne. C'est parce que notre référence à aService.foo est dépassée, mais notre référence à aService2.foo ne l'est pas. Nous avons créé une référence à la table initiale avec $scope.foo = aService.foo;, qui a ensuite été écartée par le service sur sa prochaine mise à jour, sens $scope.foo n'est plus référencé le tableau que nous avons voulu plus.

Cependant, bien qu'il existe plusieurs façons de vous assurer que la référence initiale est conservée dans le tact, parfois, il peut être nécessaire de modifier l'objet ou le tableau. Ou si la propriété de service fait référence à une primitive comme un String ou Number? Dans tous ces cas, on ne peut pas simplement compter sur une référence. Donc, ce que peut - nous faire?

Plusieurs des réponses données précédemment déjà donner quelques solutions à ce problème. Cependant, je suis personnellement en faveur de l'utilisation de la méthode simple proposé par Jin et thetallweeks dans les commentaires:

juste référence de service.foo dans le balisage html

Solution 1-b: Fixez le service de la portée, de la référence et de {service}.{property} dans le code HTML.

Sens, il suffit de faire ceci:

HTML:

<div ng-controller="FooCtrl">
  <div ng-repeat="item in aService.foo">{{ item }}</div>
</div>

JS:

function FooCtrl($scope, aService) {
    $scope.aService = aService;
}

JS:

angular.module('myApp', [])
  .factory('aService', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      //Create a new array on each update, appending the previous items and 
      //adding one new item each time
      $interval(function() {
        if (service.foo.length < 10) {
          var newArray = []
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.aService = aService;
    }
  ]);

HTML:

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Array changes on each update</h1>
    <div ng-repeat="item in aService.foo">{{ item }}</div>
  </div>
</body>

</html>

De cette façon, le $watch résoudre aService.foo sur chaque $digest, qui sera la valeur correctement mise à jour.

C'est le genre de ce que vous étiez en train de faire avec votre solution, mais dans une bien moindre ronde sur façon. Vous avez ajouté un inutile $watch dans le contrôleur qui met explicitement foo sur le $scope chaque fois qu'elle change. Vous n'avez pas besoin de ce surplus de $watch lorsque vous attachez aService au lieu de aService.foo à la $scope, et de lier explicitement à aService.foo dans le balisage.

---

Maintenant que tout est bien et bon, en supposant un $digest cycle est appliqué. Dans mes exemples ci-dessus, j'ai utilisé Angulaire du $interval service pour mettre à jour les tableaux automatiquement le coup d'envoi à un $digest boucle après chaque mise à jour. Mais que faire si le service de variables (pour quelque raison que ce soit) ne sont pas mis à jour à l'intérieur de la "Angulaire monde". En d'autres termes, nous ne ont un $digest cycle activé automatiquement chaque fois que le service des modifications de la propriété?

---

Problème 2: Manque D' $digest

De nombreuses solutions ici permettra de résoudre cette question, mais je suis d'accord avec Code Whisperer:

La raison pour laquelle nous utilisons un framework comme Angulaire est de ne pas cuire jusqu'à notre propre observateur modèles

Donc, je préfère continuer à utiliser le aService.foo de référence dans le balisage HTML, comme dans le deuxième exemple ci-dessus, et ne pas avoir à enregistrer un supplément de rappel dans le Contrôleur.

Solution 2: Utiliser un setter et getter avec $rootScope.$apply()

J'ai été surpris personne n'a encore suggéré l'utilisation d'un setter et getter. Cette fonctionnalité a été introduite dans ECMAScript5, et a donc été autour depuis des années. Bien sûr, cela signifie que si, pour quelque raison que ce soit, vous avez besoin pour soutenir vraiment les vieux navigateurs, cette méthode ne fonctionnera pas, mais je suis comme les getters et les setters sont largement sous-utilisés en JavaScript. Dans ce cas particulier, ils pourraient être très utiles:

factory('aService', [
  '$rootScope',
  function($rootScope) {
    var realFoo = [];

    var service = {
      set foo(a) {
        realFoo = a;
        $rootScope.$apply();
      },
      get foo() {
        return realFoo;
      }
    };
  //...
}

JS:

angular.module('myApp', [])
  .factory('aService', [
    '$rootScope',
    function($rootScope) {
      var realFoo = [];

      var service = {
        set foo(a) {
          realFoo = a;
          $rootScope.$apply();
        },
        get foo() {
          return realFoo;
        }
      };

      //Create a new array on each update, appending the previous items and 
      //adding one new item each time
      setInterval(function() {
        if (service.foo.length < 10) {
          var newArray = [];
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.aService = aService;
    }
  ]);

HTML:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Using a Getter/Setter</h1>
    <div ng-repeat="item in aService.foo">{{ item }}</div>
  </div>
</body>

</html>

Ici j'ai ajouté un "privé" de la variable dans la fonction de service: realFoo. Cette mise à jour et récupérées à l'aide de la get foo() et set foo() fonctions, respectivement, sur le service objet.

Notez l'utilisation de $rootScope.$apply() dans la fonction de configuration. Cela garantit que Angulaires seront informés de tout changement à service.foo. Si vous obtenez 'inprog" erreurs de voir cette page de référence utile, ou si vous utilisez Angulaire >= 1.3, vous pouvez simplement utiliser $rootScope.$applyAsync().

Aussi se méfier de cette si aService.foo est mis à jour très fréquemment, car cela pourrait affecter sensiblement les performances. Si le rendement serait un problème, vous pouvez configurer un observateur tendance est similaire pour les autres réponses ici à l'aide de l'incubateur.

Vous pouvez regarder les changements au sein de l'usine elle-même, et ensuite diffuser un changement

angular.module('MyApp').factory('aFactory', function ($rootScope) {
    //Define your factory content
    var result = {
        'key': value
    };

    //add a listener on a key        
    $rootScope.$watch(function () {
        return result.key;
    }, function (newValue, oldValue, scope) {
        //This is called after the key "key" has changed, a good idea is to broadcast a message that key has changed
        $rootScope.$broadcast('aFactory:keyChanged', newValue);
    }, true);

    return result;
});

Puis dans votre contrôleur:

angular.module('MyApp').controller('aController', ['$rootScope', function ($rootScope) {

    $rootScope.$on('aFactory:keyChanged', function currentCityChanged(event, value) {
        //do something
    });
}]);

De cette manière, vous mettez toutes les usine de code à l'intérieur de sa description, alors vous ne pouvez compter que sur la diffusion de l'extérieur

Bâtiment sur dtheodor de réponse vous pouvez utiliser quelque chose de similaire à l'-dessous pour vous assurer que vous n'oubliez pas d'annuler l'enregistrement de la fonction de rappel... Certains peuvent s'opposer à la réussite de l' $scope à un service si.

factory('aService', function() {
var observerCallbacks = [];
/**
* Registers a function that will be called when
* any modifications are made.
*
* For convenience the callback is called immediately after registering
* which can be prevented with `preventImmediate` param.
*
* Will also automatically unregister the callback upon scope destory.
*/
this.registerObserver = function($scope, cb, preventImmediate){
observerCallbacks.push(cb);
if (preventImmediate !== true) {
cb();
}
$scope.$on('$destroy', function () {
observerCallbacks.remove(cb);
});
};
function notifyObservers() {
observerCallbacks.forEach(function (cb) {
cb();
});
};
this.foo = someNgResource.query().$then(function(){
notifyObservers();
});
});

Tableau.remove est une extension de la méthode qui ressemble à ceci:

/**
* Removes the given item the current array.
*
* @param  {Object}  item   The item to remove.
* @return {Boolean}        True if the item is removed.
*/
Array.prototype.remove = function (item /*, thisp */) {
var idx = this.indexOf(item);
if (idx > -1) {
this.splice(idx, 1);
return true;
}
return false;
};

Pour ceux qui comme moi à la recherche d'une solution simple, ce n'est presque exactement ce que vous attendez de l'aide normale $regarder dans les contrôleurs.
La seule différence, c'est qu'elle évalue la chaîne dans son contexte javascript et non pas sur un champ d'application spécifique. Vous aurez à injecter $rootScope dans votre service, mais il est seulement utilisé pour accrocher dans le recueil des cycles correctement.

function watch(target, callback, deep) {
$rootScope.$watch(function () {return eval(target);}, callback, deep);
};

Je suis venu à cette question, mais il s'est avéré que mon problème était que j'étais à l'aide de la méthode setInterval quand j'aurais été à l'aide de l'angle $intervalle de fournisseur. C'est également le cas pour setTimeout (utiliser $timeout à la place). Je sais que ce n'est pas la réponse à la discussion de la question, mais cela pourrait aider certains, comme il m'a aidé.

//service: (rien de spécial ici)

myApp.service('myService', function() {
return { someVariable:'abc123' };
});

//ctrl:

myApp.controller('MyCtrl', function($scope, myService) {
$scope.someVariable = myService.someVariable;
//watch the service and update this ctrl...
$scope.$watch(function(){
return myService.someVariable;
}, function(newValue){
$scope.someVariable = newValue;
});
});

Jetez un oeil à cette plunker:: c'est l'exemple le plus simple que je pouvais penser de

http://jsfiddle.net/HEdJF/

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
<br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
</div>
<hr>
<div ng-controller="SecondCtrl">
Input should also be here: {{Data.FirstName}}<!-- How do I automatically updated it here? -->
</div>
</div>
//declare the app with no dependencies
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return { FirstName: '' };
});
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function( $scope, Data ){
$scope.Data = Data;
});

Je suis en retard pour la partie, mais j'ai trouvé une plus belle façon de le faire que la réponse affichée ci-dessus. Au lieu de l'affectation d'une variable pour stocker la valeur de la prestation variable, j'ai créé une fonction attachée à la portée, qui retourne le service variable.

contrôleur

$scope.foo = function(){
return aService.foo;
}

Je pense que cela va faire ce que vous voulez. Mon contrôleur continue à vérifier la valeur de mon service avec cette mise en œuvre. Honnêtement, c'est beaucoup plus simple que la réponse choisie.