Mam usługę, powiedz:

factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {
  var service = {
    foo: []
  };

  return service;
}]);

I chciałbym użyć foodo sterowania listą renderowaną w HTML:

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

Aby sterownik mógł wykryć, kiedy aService.foojest aktualizowany, połączyłem ten wzorzec, w którym dodałem usługę do kontrolera, $scopea następnie użyłem $scope.$watch():

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

  $scope.$watch('aService.foo', function (newVal, oldVal, scope) {
    if(newVal) { 
      scope.foo = newVal;
    }
  });
}

Wydaje mi się to długotrwałe i powtarzam to w każdym kontrolerze, który korzysta ze zmiennych usługi. Czy jest lepszy sposób na obejrzenie wspólnych zmiennych?

Zawsze możesz użyć starego dobrego wzorca obserwatora, jeśli chcesz uniknąć tyranii i kosztów ogólnych $watch.

W serwisie:

factory('aService', function() {
  var observerCallbacks = [];

  //register an observer
  this.registerObserverCallback = function(callback){
    observerCallbacks.push(callback);
  };

  //call this when you know 'foo' has been changed
  var notifyObservers = function(){
    angular.forEach(observerCallbacks, function(callback){
      callback();
    });
  };

  //example of when you may want to notify observers
  this.foo = someNgResource.query().$then(function(){
    notifyObservers();
  });
});

I w kontrolerze:

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

  aService.registerObserverCallback(updateFoo);
  //service now in control of updating foo
};

W takim scenariuszu, w którym wiele / nieznanych obiektów może być zainteresowanych zmianami, skorzystaj $rootScope.$broadcastze zmienianego elementu.

Zamiast tworzyć własny rejestr słuchaczy (które muszą zostać wyczyszczone przy różnych zniszczeniach $), powinieneś mieć możliwość skorzystania $broadcastz danej usługi.

Nadal musisz kodować $onprogramy obsługi w każdym detektorze, ale wzorzec jest oddzielony od wielu wywołań do, $digestco pozwala uniknąć ryzyka długotrwałych obserwatorów.

W ten sposób również słuchacze mogą przychodzić i wychodzić z DOM i / lub różnych zakresów potomnych bez zmiany sposobu działania usługi.

** aktualizacja: przykłady **

Nadawanie byłoby najbardziej sensowne w „globalnych” usługach, które mogą wpływać na niezliczone inne rzeczy w Twojej aplikacji. Dobrym przykładem jest usługa użytkownika, w której może się zdarzyć wiele zdarzeń, takich jak logowanie, wylogowanie, aktualizacja, bezczynność itp. Uważam, że to tutaj nadawanie ma sens, ponieważ każdy zasięg może nasłuchiwać zdarzenia, bez nawet wstrzyknięcie usługi i nie trzeba oceniać żadnych wyrażeń ani wyników pamięci podręcznej w celu sprawdzenia zmian. Po prostu odpala i zapomina (więc upewnij się, że jest to powiadomienie o pożarze i zapomnieniu, a nie coś, co wymaga działania)

.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;
}]);

Powyższa usługa nadałaby komunikat do każdego zakresu, gdy funkcja save () zakończyła się i dane były prawidłowe. Alternatywnie, jeśli jest to zasób $ lub przesłanie ajax, przenieś wywołanie rozgłoszeniowe do wywołania zwrotnego, aby uruchamiało się, gdy serwer odpowiedział. Emisje pasują szczególnie do tego wzorca, ponieważ każdy słuchacz po prostu czeka na wydarzenie bez konieczności sprawdzania zasięgu przy każdym $ streszczeniu. Słuchacz wyglądałby następująco:

.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 ..
   });

 }]);

Jedną z korzyści tego jest eliminacja wielu zegarków. Jeśli łączysz pola lub wyprowadzasz wartości jak w powyższym przykładzie, będziesz musiał obserwować zarówno imię, jak i nazwisko. Oglądanie funkcji getUser () działałoby tylko wtedy, gdy obiekt użytkownika został zastąpiony podczas aktualizacji, nie uruchamiałby się, gdyby obiekt użytkownika został po prostu zaktualizowany. W takim przypadku musisz zrobić dokładny zegarek, który jest bardziej intensywny.

$ broadcast wysyła wiadomość z zakresu, do którego została wywołana, do dowolnych zakresów potomnych. Więc wywołanie go z $ rootScope będzie uruchamiane na każdym zasięgu. Jeśli na przykład miałbyś nadawać z zakresu kontrolera, uruchamiałby się tylko w zakresach dziedziczących z zakresu kontrolera. $ emit idzie w przeciwnym kierunku i zachowuje się podobnie jak zdarzenie DOM, ponieważ bąbelki w górę łańcucha zasięgu.

Należy pamiętać, że istnieją scenariusze, w których $ broadcast ma wiele sensu, i są scenariusze, w których $ watch jest lepszą opcją - szczególnie jeśli jest w zakresie izolowanym z bardzo specyficznym wyrażeniem watch.

Używam podobnego podejścia jak @dtheodot, ale używam obietnicy kątowej zamiast przekazywać wywołania zwrotne

app.service('myService', function($q) {
    var self = this,
        defer = $q.defer();

    this.foo = 0;

    this.observeFoo = function() {
        return defer.promise;
    }

    this.setFoo = function(foo) {
        self.foo = foo;
        defer.notify(self.foo);
    }
})

Następnie, gdziekolwiek, użyj myService.setFoo(foo)metody aktualizacji foow serwisie. W kontrolerze możesz użyć go jako:

myService.observeFoo().then(null, null, function(foo){
    $scope.foo = foo;
})

Pierwsze dwa argumenty thento wywołania zwrotne sukcesu i błędu, trzeci to powiadomienie zwrotne.

Referencje dla $ q.

Bez zegarków i wywołań zwrotnych obserwatora ( 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>

Ten JavaScript działa, gdy przekazujemy obiekt z usługi, a nie wartość. Gdy obiekt JavaScript jest zwracany z usługi, Angular dodaje zegarki do wszystkich swoich właściwości.

Zauważ też, że używam „var self = this”, ponieważ muszę zachować odniesienie do oryginalnego obiektu, gdy wykonuje się limit czasu $, w przeciwnym razie „this” będzie odnosić się do obiektu okna.

Natknąłem się na to pytanie, szukając czegoś podobnego, ale myślę, że zasługuje na dokładne wyjaśnienie tego, co się dzieje, a także kilka dodatkowych rozwiązań.

Gdy wyrażenie HTML, takie jak użyte, jest obecne w kodzie HTML, Angular automatycznie konfiguruje $watchfor $scope.fooi będzie aktualizować HTML przy każdej $scope.foozmianie.

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

Niewypowiedzianym problemem jest to, że jedna z dwóch rzeczy wpływa na to aService.foo , że zmiany nie są wykrywane. Te dwie możliwości to:

1. aService.foo ustawia się za każdym razem do nowej tablicy, powodując, że odwołanie do niej jest nieaktualne.
2. aService.foojest aktualizowany w taki sposób, że $digestcykl nie jest uruchamiany podczas aktualizacji.

Problem 1: Nieaktualne referencje

Biorąc pod uwagę pierwszą możliwość, zakładając, że $digeststosuje się a, jeśli aService.foozawsze była to ta sama tablica, zestaw automatycznie $watchwykryłby zmiany, jak pokazano w poniższym fragmencie kodu.

Rozwiązanie 1-a: Upewnij się, że tablica lub obiekt jest tym samym obiektem przy każdej aktualizacji

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;
    }
  ]);

<!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>

Jak widać, NG-repeat rzekomo przypisane do aService.foonie aktualizuje kiedy aService.foozmiany, ale ng-repeat dołączone do aService2.foo robi . Jest tak, ponieważ nasze odniesienie do aService.foojest nieaktualne, ale nasze odniesienie do aService2.foonie jest. Utworzyliśmy odwołanie do początkowej tablicy $scope.foo = aService.foo;, która została następnie odrzucona przez usługę przy następnej aktualizacji, co oznacza, że $scope.foonie odnosi się już do tablicy, której chcieliśmy.

Jednakże, chociaż istnieje kilka sposobów, aby upewnić się, że początkowe odniesienie jest utrzymywane w takcie, czasami może być konieczna zmiana obiektu lub tablicy. A co jeśli właściwość usługi odwołuje się do prymitywu takiego jak Stringlub Number? W takich przypadkach nie możemy po prostu polegać na referencji. Więc co można zrobić?

Kilka podanych wcześniej odpowiedzi już daje pewne rozwiązania tego problemu. Jednak osobiście opowiadam się za zastosowaniem prostej metody sugerowanej przez Jina i thetallweeks w komentarzach:

po prostu odwołaj aService.foo w znaczniku HTML

Rozwiązanie 1-b: Dołącz usługę do zakresu i odwołanie {service}.{property}w kodzie HTML.

Czyli po prostu zrób to:

HTML:

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

JS:

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

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;
    }
  ]);

<!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>

W ten sposób $watchzostanie rozwiązany aService.fookażdy $digest, który uzyska poprawnie zaktualizowaną wartość.

Jest to rodzaj tego, co próbujesz zrobić ze swoim obejściem, ale w znacznie mniejszym stopniu. Dodałeś niepotrzebne $watchw kontrolerze, który jawnie nakłada foosię za $scopekażdym razem, gdy się zmienia. Nie potrzebujesz tego dodatkowego, $watchgdy dołączasz aServicezamiast aService.foodo $scopei przypisujesz się bezpośrednio do aService.fooznaczników.

To wszystko dobrze i dobrze, jeśli zastosuje się $digestcykl. W powyższych przykładach użyłem $intervalusługi Angulara do aktualizacji tablic, która automatycznie uruchamia $digestpętlę po każdej aktualizacji. Ale co, jeśli zmienne serwisowe (z jakiegokolwiek powodu) nie są aktualizowane w „świecie Angular”. Innymi słowy, czy nie mamy $digestcyklu aktywowanego automatycznie przy każdej zmianie właściwości usługi?

Problem 2: Brak $digest

Wiele rozwiązań tutaj rozwiązuje ten problem, ale zgadzam się z Code Whisperer :

Powodem, dla którego używamy frameworku takiego jak Angular, jest nie gotowanie własnych wzorców obserwatorów

Dlatego wolałbym nadal używać aService.fooodwołania w znacznikach HTML, jak pokazano w drugim przykładzie powyżej, i nie musiałbym rejestrować dodatkowego wywołania zwrotnego w kontrolerze.

Rozwiązanie 2: Użyj setera i gettera z $rootScope.$apply()

Byłem zaskoczony, że nikt jeszcze nie zasugerował użycia setera i gettera . Ta funkcja została wprowadzona w ECMAScript5 i dlatego istnieje już od lat. Oczywiście oznacza to, że jeśli z jakiegoś powodu musisz obsługiwać naprawdę stare przeglądarki, ta metoda nie będzie działać, ale wydaje mi się, że JavaScript i gettery są znacznie słabo wykorzystywane. W tym konkretnym przypadku mogą być bardzo przydatne:

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

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

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;
    }
  ]);

<!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>

Tutaj dodałem „prywatny” zmienną w funkcji serwisowej: realFoo. Ten plik jest aktualizowany i pobierany przy użyciu odpowiednio funkcji get foo()i set foo()na serviceobiekcie.

Zwróć uwagę na użycie $rootScope.$apply()funkcji set. Zapewnia to, że Angular będzie świadomy wszelkich zmian w service.foo. Jeśli pojawią się błędy „inprog”, zobacz tę przydatną stronę referencyjną lub jeśli używasz Angular> = 1.3, możesz po prostu użyć $rootScope.$applyAsync().

Uważaj na to, jeśli aService.foojest bardzo często aktualizowany, ponieważ może to znacząco wpłynąć na wydajność. Jeśli wydajność byłaby problemem, możesz ustawić wzorzec obserwatora podobny do innych odpowiedzi tutaj za pomocą setera.

O ile mogę powiedzieć, nie musisz robić czegoś tak skomplikowanego jak to. Przypisałeś już foo z usługi do swojego zakresu, a ponieważ foo jest tablicą (i z kolei jest obiektem przypisywanym przez referencję!). Wszystko, co musisz zrobić, to coś takiego:

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

 }

Jeśli jakaś inna zmienna w tym samym Ctrl jest zależna od zmiany Foo, to tak, potrzebujesz obserwować Foo i dokonać zmian w tej zmiennej. Ale pod warunkiem, że jest to proste oglądanie referencji, nie jest konieczne. Mam nadzieję że to pomoże.

Możesz wstawić usługę do $ rootScope i oglądać:

myApp.run(function($rootScope, aService){
    $rootScope.aService = aService;
    $rootScope.$watch('aService', function(){
        alert('Watch');
    }, true);
});

W twoim kontrolerze:

myApp.controller('main', function($scope){
    $scope.aService.foo = 'change';
});

Inną opcją jest użycie zewnętrznej biblioteki, takiej jak: https://github.com/melanke/Watch.JS

Współpracuje z: IE 9+, FF 4+, SF 5+, WebKit, CH 7+, OP 12+, BESEN, Node.JS, Rhino 1.7+

Możesz obserwować zmiany jednego, wielu lub wszystkich atrybutów obiektu.

Przykład:

var ex3 = {
    attr1: 0,
    attr2: "initial value of attr2",
    attr3: ["a", 3, null]
};   
watch(ex3, function(){
    alert("some attribute of ex3 changes!");
});
ex3.attr3.push("new value");​

Możesz obejrzeć zmiany w samej fabryce, a następnie opublikować zmianę

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;
});

Następnie w kontrolerze:

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

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

W ten sposób umieścisz cały powiązany kod fabryczny w jego opisie, możesz polegać tylko na transmisji z zewnątrz

== AKTUALIZACJA ==

Bardzo proste teraz w zegarku $.

Pióro tutaj .

HTML:

<div class="container" data-ng-app="app">

  <div class="well" data-ng-controller="FooCtrl">
    <p><strong>FooController</strong></p>
    <div class="row">
      <div class="col-sm-6">
        <p><a href="" ng-click="setItems([ { name: 'I am single item' } ])">Send one item</a></p>
        <p><a href="" ng-click="setItems([ { name: 'Item 1 of 2' }, { name: 'Item 2 of 2' } ])">Send two items</a></p>
        <p><a href="" ng-click="setItems([ { name: 'Item 1 of 3' }, { name: 'Item 2 of 3' }, { name: 'Item 3 of 3' } ])">Send three items</a></p>
      </div>
      <div class="col-sm-6">
        <p><a href="" ng-click="setName('Sheldon')">Send name: Sheldon</a></p>
        <p><a href="" ng-click="setName('Leonard')">Send name: Leonard</a></p>
        <p><a href="" ng-click="setName('Penny')">Send name: Penny</a></p>
      </div>
    </div>
  </div>

  <div class="well" data-ng-controller="BarCtrl">
    <p><strong>BarController</strong></p>
    <p ng-if="name">Name is: {{ name }}</p>
    <div ng-repeat="item in items">{{ item.name }}</div>
  </div>

</div>

JavaScript:

var app = angular.module('app', []);

app.factory('PostmanService', function() {
  var Postman = {};
  Postman.set = function(key, val) {
    Postman[key] = val;
  };
  Postman.get = function(key) {
    return Postman[key];
  };
  Postman.watch = function($scope, key, onChange) {
    return $scope.$watch(
      // This function returns the value being watched. It is called for each turn of the $digest loop
      function() {
        return Postman.get(key);
      },
      // This is the change listener, called when the value returned from the above function changes
      function(newValue, oldValue) {
        if (newValue !== oldValue) {
          // Only update if the value changed
          $scope[key] = newValue;
          // Run onChange if it is function
          if (angular.isFunction(onChange)) {
            onChange(newValue, oldValue);
          }
        }
      }
    );
  };
  return Postman;
});

app.controller('FooCtrl', ['$scope', 'PostmanService', function($scope, PostmanService) {
  $scope.setItems = function(items) {
    PostmanService.set('items', items);
  };
  $scope.setName = function(name) {
    PostmanService.set('name', name);
  };
}]);

app.controller('BarCtrl', ['$scope', 'PostmanService', function($scope, PostmanService) {
  $scope.items = [];
  $scope.name = '';
  PostmanService.watch($scope, 'items');
  PostmanService.watch($scope, 'name', function(newVal, oldVal) {
    alert('Hi, ' + newVal + '!');
  });
}]);

Opierając się na odpowiedzi dtheodora, możesz użyć czegoś podobnego do poniższego, aby upewnić się, że nie zapomnisz wyrejestrować połączenia zwrotnego ... Niektórzy mogą jednak sprzeciwić się przekazaniu $scopeusługi.

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();
  });
});

Array.remove to metoda rozszerzenia, która wygląda następująco:

/**
 * 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;
};

Oto moje ogólne podejście.

mainApp.service('aService',[function(){
        var self = this;
        var callbacks = {};

        this.foo = '';

        this.watch = function(variable, callback) {
            if (typeof(self[variable]) !== 'undefined') {
                if (!callbacks[variable]) {
                    callbacks[variable] = [];
                }
                callbacks[variable].push(callback);
            }
        }

        this.notifyWatchersOn = function(variable) {
            if (!self[variable]) return;
            if (!callbacks[variable]) return;

            angular.forEach(callbacks[variable], function(callback, key){
                callback(self[variable]);
            });
        }

        this.changeFoo = function(newValue) {
            self.foo = newValue;
            self.notifyWatchersOn('foo');
        }

    }]);

W twoim kontrolerze

function FooCtrl($scope, aService) {
    $scope.foo;

    $scope._initWatchers = function() {
        aService.watch('foo', $scope._onFooChange);
    }

    $scope._onFooChange = function(newValue) {
        $scope.foo = newValue;
    }

    $scope._initWatchers();

}

FooCtrl.$inject = ['$scope', 'aService'];

Dla takich jak ja, którzy szukają prostego rozwiązania, robi to prawie dokładnie to, czego oczekujesz od używania normalnego $ watch w kontrolerach. Jedyną różnicą jest to, że ocenia ciąg w kontekście javascript, a nie w określonym zakresie. Będziesz musiał wprowadzić $ rootScope do swojej usługi, chociaż służy on tylko do prawidłowego podłączenia do cykli trawienia.

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

w obliczu bardzo podobnego problemu obejrzałem funkcję w zakresie i kazałem tej funkcji zwrócić zmienną usługi. Stworzyłem skrzypce js . kod znajdziesz poniżej.

    var myApp = angular.module("myApp",[]);

myApp.factory("randomService", function($timeout){
    var retValue = {};
    var data = 0;

    retValue.startService = function(){
        updateData();
    }

    retValue.getData = function(){
        return data;
    }

    function updateData(){
        $timeout(function(){
            data = Math.floor(Math.random() * 100);
            updateData()
        }, 500);
    }

    return retValue;
});

myApp.controller("myController", function($scope, randomService){
    $scope.data = 0;
    $scope.dataUpdated = 0;
    $scope.watchCalled = 0;
    randomService.startService();

    $scope.getRandomData = function(){
        return randomService.getData();    
    }

    $scope.$watch("getRandomData()", function(newValue, oldValue){
        if(oldValue != newValue){
            $scope.data = newValue;
            $scope.dataUpdated++;
        }
            $scope.watchCalled++;
    });
});

Przyszedłem do tego pytania, ale okazało się, że mój problem polega na tym, że korzystałem z setInterval, kiedy powinienem był używać dostawcy kątowego $ interwału. Dotyczy to również setTimeout (zamiast tego użyj $ timeout). Wiem, że to nie jest odpowiedź na pytanie PO, ale może pomóc niektórym, ponieważ pomogło mi.

Znalazłem naprawdę świetne rozwiązanie w drugim wątku z podobnym problemem, ale zupełnie innym podejściem. Źródło: AngularJS: $ watch wewnątrz dyrektywy nie działa po zmianie wartości $ rootScope

Zasadniczo rozwiązanie mówi NIE używać, $watchponieważ jest to bardzo ciężkie rozwiązanie. Zamiast tego proponują użycie $emiti $on.

Moim problemem było obejrzenie zmiennej w moim serwisie i zareagowanie zgodnie z dyrektywą . I powyższą metodą jest to bardzo proste!

Przykład mojego modułu / usługi:

angular.module('xxx').factory('example', function ($rootScope) {
    var user;

    return {
        setUser: function (aUser) {
            user = aUser;
            $rootScope.$emit('user:change');
        },
        getUser: function () {
            return (user) ? user : false;
        },
        ...
    };
});

Więc zasadniczo oglądać Moje strony user - zawsze, gdy jest ustawiony na nową wartość I stanu.$emituser:change

Teraz w moim przypadku zastosowałem w dyrektywie :

angular.module('xxx').directive('directive', function (Auth, $rootScope) {
    return {
        ...
        link: function (scope, element, attrs) {
            ...
            $rootScope.$on('user:change', update);
        }
    };
});

Teraz w dyrektywie słucham $rootScopei na temat danej zmiany - odpowiednio reaguję. Bardzo łatwe i eleganckie!

// service: (tutaj nic specjalnego)

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;
  });
});

Trochę brzydkie, ale dodałem rejestrację zmiennych zakresu do mojej usługi dla przełącznika:

myApp.service('myService', function() {
    var self = this;
    self.value = false;
    self.c2 = function(){};
    self.callback = function(){
        self.value = !self.value; 
       self.c2();
    };

    self.on = function(){
        return self.value;
    };

    self.register = function(obj, key){ 
        self.c2 = function(){
            obj[key] = self.value; 
            obj.$apply();
        } 
    };

    return this;
});

A następnie w kontrolerze:

function MyCtrl($scope, myService) {
    $scope.name = 'Superhero';
    $scope.myVar = false;
    myService.register($scope, 'myVar');
}

Spójrz na tego plunkera :: to najprostszy przykład, jaki mogłem wymyślić

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;
});

Widziałem tutaj okropne wzorce obserwatorów, które powodują wycieki pamięci w dużych aplikacjach.

Mogę się trochę spóźnić, ale to takie proste.

Funkcja zegarka obserwuje zmiany referencyjne (typy pierwotne), jeśli chcesz obejrzeć coś w rodzaju wypychania tablicy, po prostu użyj:

someArray.push(someObj); someArray = someArray.splice(0);

Spowoduje to zaktualizowanie referencji i aktualizację zegarka z dowolnego miejsca. W tym metoda pobierania usług. Wszystko, co jest prymitywne, zostanie zaktualizowane automatycznie.

Jestem spóźniony do tej części, ale znalazłem lepszy sposób na zrobienie tego niż odpowiedź zamieszczona powyżej. Zamiast przypisywać zmienną do przechowywania wartości zmiennej usługi, utworzyłem funkcję dołączoną do zakresu, która zwraca zmienną usługi.

kontroler

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

Myślę, że zrobi to, co chcesz. Dzięki tej implementacji mój kontroler stale sprawdza wartość mojej usługi. Szczerze mówiąc, jest to o wiele prostsze niż wybrana odpowiedź.

Napisałem dwie proste usługi narzędziowe, które pomagają mi śledzić zmiany właściwości usługi.

Jeśli chcesz pominąć długie wyjaśnienie, możesz przejść cieśniną do jsfiddle

1. WatchObj

mod.service('WatchObj', ['$rootScope', WatchObjService]);

function WatchObjService($rootScope) {
  // returns watch function
  // obj: the object to watch for
  // fields: the array of fields to watch
  // target: where to assign changes (usually it's $scope or controller instance)
  // $scope: optional, if not provided $rootScope is use
  return function watch_obj(obj, fields, target, $scope) {
    $scope = $scope || $rootScope;
    //initialize watches and create an array of "unwatch functions"
    var watched = fields.map(function(field) {
      return $scope.$watch(
        function() {
          return obj[field];
        },
        function(new_val) {
          target[field] = new_val;
        }
      );
    });
    //unregister function will unregister all our watches
    var unregister = function unregister_watch_obj() {
      watched.map(function(unregister) {
        unregister();
      });
    };
    //automatically unregister when scope is destroyed
    $scope.$on('$destroy', unregister);
    return unregister;
  };
}

Ta usługa jest używana w kontrolerze w następujący sposób: Załóżmy, że masz usługę „testService” o właściwościach „prop1”, „prop2”, „prop3”. Chcesz obejrzeć i przypisać do zakresu „prop1” i „prop2”. Dzięki usłudze zegarka będzie to wyglądać tak:

app.controller('TestWatch', ['$scope', 'TestService', 'WatchObj', TestWatchCtrl]);

function TestWatchCtrl($scope, testService, watch) {
  $scope.prop1 = testService.prop1;
  $scope.prop2 = testService.prop2;
  $scope.prop3 = testService.prop3;
  watch(testService, ['prop1', 'prop2'], $scope, $scope);
}

2. Zastosuj Watch obj jest świetny, ale nie wystarczy, jeśli masz kod asynchroniczny w swojej usłudze. W takim przypadku używam drugiego narzędzia, które wygląda tak:

mod.service('apply', ['$timeout', ApplyService]);

function ApplyService($timeout) {
  return function apply() {
    $timeout(function() {});
  };
}

Wywołałbym go na końcu mojego kodu asynchronicznego, aby uruchomić pętlę $ digest. Tak:

app.service('TestService', ['apply', TestService]);

function TestService(apply) {
  this.apply = apply;
}
TestService.prototype.test3 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
    this.apply(); //trigger $digest loop
  }.bind(this));
}

Wszystko to razem będzie wyglądać tak (możesz to uruchomić lub otworzyć skrzypce ):

// TEST app code

var app = angular.module('app', ['watch_utils']);

app.controller('TestWatch', ['$scope', 'TestService', 'WatchObj', TestWatchCtrl]);

function TestWatchCtrl($scope, testService, watch) {
  $scope.prop1 = testService.prop1;
  $scope.prop2 = testService.prop2;
  $scope.prop3 = testService.prop3;
  watch(testService, ['prop1', 'prop2'], $scope, $scope);
  $scope.test1 = function() {
    testService.test1();
  };
  $scope.test2 = function() {
    testService.test2();
  };
  $scope.test3 = function() {
    testService.test3();
  };
}

app.service('TestService', ['apply', TestService]);

function TestService(apply) {
  this.apply = apply;
  this.reset();
}
TestService.prototype.reset = function() {
  this.prop1 = 'unchenged';
  this.prop2 = 'unchenged2';
  this.prop3 = 'unchenged3';
}
TestService.prototype.test1 = function() {
  this.prop1 = 'changed_test_1';
  this.prop2 = 'changed2_test_1';
  this.prop3 = 'changed3_test_1';
}
TestService.prototype.test2 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
  }.bind(this));
}
TestService.prototype.test3 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
    this.apply();
  }.bind(this));
}
//END TEST APP CODE

//WATCH UTILS
var mod = angular.module('watch_utils', []);

mod.service('apply', ['$timeout', ApplyService]);

function ApplyService($timeout) {
  return function apply() {
    $timeout(function() {});
  };
}

mod.service('WatchObj', ['$rootScope', WatchObjService]);

function WatchObjService($rootScope) {
  // target not always equals $scope, for example when using bindToController syntax in 
  //directives
  return function watch_obj(obj, fields, target, $scope) {
    // if $scope is not provided, $rootScope is used
    $scope = $scope || $rootScope;
    var watched = fields.map(function(field) {
      return $scope.$watch(
        function() {
          return obj[field];
        },
        function(new_val) {
          target[field] = new_val;
        }
      );
    });
    var unregister = function unregister_watch_obj() {
      watched.map(function(unregister) {
        unregister();
      });
    };
    $scope.$on('$destroy', unregister);
    return unregister;
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='test' ng-app="app" ng-controller="TestWatch">
  prop1: {{prop1}}
  <br>prop2: {{prop2}}
  <br>prop3 (unwatched): {{prop3}}
  <br>
  <button ng-click="test1()">
    Simple props change
  </button>
  <button ng-click="test2()">
    Async props change
  </button>
  <button ng-click="test3()">
    Async props change with apply
  </button>
</div>