Ich habe einen Service, sagen wir:

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

  return service;
}]);

Und ich möchte fooeine Liste steuern, die in HTML gerendert wird:

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

Damit der Controller aService.fooerkennt, wann aktualisiert wird, habe ich dieses Muster zusammengeschustert, wobei ich dem Controller einen Service hinzufüge $scopeund dann Folgendes verwende $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;
    }
  });
}

Dies fühlt sich langwierig an und ich habe es in jedem Controller wiederholt, der die Variablen des Dienstes verwendet. Gibt es eine bessere Möglichkeit, gemeinsam genutzte Variablen zu überwachen?

Sie können immer das gute alte Beobachtermuster verwenden, wenn Sie die Tyrannei und den Aufwand von vermeiden möchten $watch.

Im Dienste:

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

Und in der Steuerung:

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

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

In einem solchen Szenario, in dem mehrere / unbekannte Objekte möglicherweise an Änderungen interessiert sind, verwenden Sie $rootScope.$broadcastdas zu ändernde Element.

Anstatt eine eigene Registrierung von Listenern zu erstellen (die bei verschiedenen $ destroys bereinigt werden müssen), sollten Sie in der Lage sein, $broadcastüber den betreffenden Dienst zu verfügen .

Sie müssen weiterhin die $onHandler in jedem Listener codieren, aber das Muster ist von mehreren Aufrufen an entkoppelt $digestund vermeidet so das Risiko von lang laufenden Beobachtern.

Auf diese Weise können Zuhörer auch aus dem DOM und / oder verschiedenen untergeordneten Bereichen kommen und gehen, ohne dass der Dienst sein Verhalten ändert.

** Update: Beispiele **

Sendungen sind in "globalen" Diensten am sinnvollsten, die sich auf unzählige andere Dinge in Ihrer App auswirken können. Ein gutes Beispiel ist ein Benutzerdienst, bei dem eine Reihe von Ereignissen stattfinden können, z. B. Anmelden, Abmelden, Aktualisieren, Leerlauf usw. Ich glaube, hier sind Broadcasts am sinnvollsten, da jeder Bereich auf ein Ereignis warten kann, ohne Selbst wenn der Dienst injiziert wird, müssen keine Ausdrücke oder Cache-Ergebnisse ausgewertet werden, um nach Änderungen zu suchen. Es wird nur ausgelöst und vergessen (stellen Sie also sicher, dass es sich um eine Feuer-und-Vergessen-Benachrichtigung handelt, die keine Maßnahmen erfordert).

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

Der obige Dienst sendet eine Nachricht an jeden Bereich, wenn die Funktion save () abgeschlossen ist und die Daten gültig sind. Wenn es sich alternativ um eine $ -Ressource oder eine Ajax-Übermittlung handelt, verschieben Sie den Broadcast-Anruf in den Rückruf, damit er ausgelöst wird, wenn der Server geantwortet hat. Broadcasts passen besonders gut zu diesem Muster, da jeder Listener nur auf das Ereignis wartet, ohne den Umfang jedes einzelnen $ Digest überprüfen zu müssen. Der Hörer würde aussehen wie:

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

 }]);

Einer der Vorteile davon ist der Wegfall mehrerer Uhren. Wenn Sie Felder kombinieren oder Werte wie im obigen Beispiel ableiten, müssen Sie sowohl die Eigenschaften Vorname als auch Nachname überwachen. Das Beobachten der Funktion getUser () würde nur funktionieren, wenn das Benutzerobjekt bei Aktualisierungen ersetzt wurde. Es würde nicht ausgelöst, wenn die Eigenschaften des Benutzerobjekts lediglich aktualisiert würden. In diesem Fall müssten Sie eine tiefe Beobachtung machen, und das ist intensiver.

$ Broadcast sendet die Nachricht aus dem aufgerufenen Bereich in untergeordnete Bereiche. Wenn Sie es also von $ rootScope aus aufrufen, wird es in jedem Bereich ausgelöst. Wenn Sie beispielsweise $ Broadcast aus dem Bereich Ihres Controllers senden, wird dieser nur in den Bereichen ausgelöst, die von Ihrem Controller-Bereich erben. $ emit geht in die entgegengesetzte Richtung und verhält sich ähnlich wie ein DOM-Ereignis, indem es die Scope-Kette in die Luft sprudelt.

Denken Sie daran, dass es Szenarien gibt, in denen $ Broadcast sehr sinnvoll ist, und es gibt Szenarien, in denen $ Watch eine bessere Option ist - insbesondere in einem isolierten Bereich mit einem ganz bestimmten Watch-Ausdruck.

Ich verwende einen ähnlichen Ansatz wie @dtheodot, verwende jedoch ein Winkelversprechen, anstatt Rückrufe weiterzuleiten

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

Verwenden Sie dann überall die myService.setFoo(foo)Methode, um den fooService zu aktualisieren . In Ihrem Controller können Sie es verwenden als:

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

Die ersten beiden Argumente thensind Erfolgs- und Fehlerrückrufe, das dritte ist der Benachrichtigungsrückruf.

Referenz für $ q.

Ohne Uhren oder Beobachter-Rückrufe ( 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>

Dieses JavaScript funktioniert, wenn wir ein Objekt anstelle eines Werts vom Dienst zurückgeben. Wenn ein JavaScript-Objekt von einem Dienst zurückgegeben wird, fügt Angular allen seinen Eigenschaften Überwachungsfunktionen hinzu.

Beachten Sie auch, dass ich 'var self = this' verwende, da ich bei der Ausführung des $ timeout einen Verweis auf das ursprüngliche Objekt behalten muss, andernfalls bezieht sich 'this' auf das Fensterobjekt.

Ich bin auf diese Frage gestoßen, als ich nach etwas Ähnlichem gesucht habe, aber ich denke, sie verdient eine gründliche Erklärung der Vorgänge sowie einige zusätzliche Lösungen.

Wenn ein Winkelausdruck wie der von Ihnen verwendete im HTML-Code vorhanden ist, richtet Angular automatisch ein $watchfor ein $scope.foound aktualisiert den HTML-Code bei jeder $scope.fooÄnderung.

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

Das unausgesprochene Problem hierbei ist, dass eines von zwei Dingen so wirkt aService.foo , dass die Änderungen nicht erkannt werden. Diese beiden Möglichkeiten sind:

1. aService.foo wird jedes Mal auf ein neues Array gesetzt, wodurch der Verweis darauf veraltet ist.
2. aService.foowird so aktualisiert, dass $digestbeim Update kein Zyklus ausgelöst wird.

Problem 1: Veraltete Referenzen

Unter Berücksichtigung der ersten Möglichkeit würde unter der Annahme, dass a $digestangewendet wird, wenn aService.fooimmer dasselbe Array verwendet würde, der automatisch festgelegte $watchdie Änderungen erkennen, wie im folgenden Codeausschnitt gezeigt.

Lösung 1-a: Stellen Sie sicher, dass das Array oder Objekt bei jedem Update dasselbe Objekt ist

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>

Wie Sie sehen können, wird die angeblich angehängte ng-Wiederholung aService.foobei aService.fooÄnderungen nicht aktualisiert , die angehängte ng-Wiederholung aService2.foo jedoch . Dies liegt daran, dass unser Verweis auf aService.fooveraltet ist, unser Verweis auf aService2.foojedoch nicht. Wir haben einen Verweis auf das ursprüngliche Array mit erstellt $scope.foo = aService.foo;, der dann beim nächsten Update vom Dienst verworfen wurde, was bedeutet, dass $scope.foonicht mehr auf das gewünschte Array verwiesen wird.

Obwohl es verschiedene Möglichkeiten gibt, um sicherzustellen, dass die ursprüngliche Referenz erhalten bleibt, kann es manchmal erforderlich sein, das Objekt oder Array zu ändern. Oder was ist, wenn die Serviceeigenschaft auf ein Grundelement wie ein Stringoder verweist Number? In diesen Fällen können wir uns nicht einfach auf eine Referenz verlassen. Was können wir also tun?

Einige der zuvor gegebenen Antworten geben bereits einige Lösungen für dieses Problem. Ich persönlich bin jedoch dafür, die einfache Methode zu verwenden, die Jin und die ganzen Wochen in den Kommentaren vorgeschlagen haben:

Verweisen Sie einfach im HTML-Markup auf aService.foo

Lösung 1-b: Hängen Sie den Dienst an den Bereich an und verweisen Sie ihn {service}.{property}im HTML-Code.

Das heißt, mach einfach das:

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="angular.js@1.4.7" 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>

Auf diese Weise der $watchWille Entschlossenheit aService.fooauf jeden $digest, der die korrekt aktualisierte Wert erhalten wird.

Dies ist eine Art von dem, was Sie mit Ihrer Problemumgehung versucht haben, aber auf eine viel weniger runde Art und Weise. Sie hinzugefügt unnötig $watchin der Steuerung , die legt ausdrücklich foodas auf , $scopewenn sie sich ändert. Sie brauchen nicht , dass zusätzliche , $watchwenn Sie legen aServicestatt aService.fooauf das $scope, und binden explizit aService.fooim Markup.

Nun, das ist alles schön und gut, vorausgesetzt, ein $digestZyklus wird angewendet. In meinen obigen Beispielen habe ich Angulars $intervalDienst verwendet, um die Arrays zu aktualisieren, wodurch $digestnach jeder Aktualisierung automatisch eine Schleife ausgelöst wird. Was aber, wenn die Dienstvariablen (aus welchen Gründen auch immer) in der "Angular World" nicht aktualisiert werden? Mit anderen Worten, wir dont haben einen $digestZyklus automatisch aktiviert wird , sobald die Service - Eigenschaft ändert?

Problem 2: Vermisst $digest

Viele der hier aufgeführten Lösungen werden dieses Problem lösen, aber ich stimme Code Whisperer zu :

Der Grund, warum wir ein Framework wie Angular verwenden, besteht darin, keine eigenen Beobachtermuster zu erstellen

Daher würde ich es vorziehen, die aService.fooReferenz im HTML-Markup weiterhin zu verwenden, wie im zweiten Beispiel oben gezeigt, und keinen zusätzlichen Rückruf im Controller registrieren zu müssen.

Lösung 2: Verwenden Sie einen Setter und Getter mit $rootScope.$apply()

Ich war überrascht, dass noch niemand die Verwendung von Setter und Getter vorgeschlagen hat . Diese Funktion wurde in ECMAScript5 eingeführt und gibt es daher seit Jahren. Das bedeutet natürlich, dass diese Methode nicht funktioniert, wenn Sie aus irgendeinem Grund wirklich alte Browser unterstützen müssen, aber ich denke, dass Getter und Setter in JavaScript stark unterbeansprucht werden. In diesem speziellen Fall könnten sie sehr nützlich sein:

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>

Hier habe ich eine 'private' Variable in die Servicefunktion eingefügt : realFoo. Dieses gets aktualisiert und abgerufen die Verwendung get foo()und set foo()Funktionen jeweils auf dem serviceObjekt.

Beachten Sie die Verwendung von $rootScope.$apply()in der eingestellten Funktion. Dadurch wird sichergestellt, dass Angular über Änderungen informiert wird service.foo. Wenn Sie 'inprog'-Fehler erhalten, lesen Sie diese nützliche Referenzseite , oder wenn Sie Angular> = 1.3 verwenden, können Sie einfach verwenden $rootScope.$applyAsync().

Seien Sie auch vorsichtig, wenn aService.foodiese sehr häufig aktualisiert werden, da dies die Leistung erheblich beeinträchtigen kann. Wenn die Leistung ein Problem darstellt, können Sie mit dem Setter ein Beobachtermuster einrichten, das den anderen Antworten hier ähnelt.

Soweit ich das beurteilen kann, müssen Sie nichts so Aufwändiges tun. Sie haben Ihrem Bereich bereits foo aus dem Dienst zugewiesen, und da foo ein Array ist (und wiederum ein Objekt, wird es als Referenz zugewiesen!). Alles, was Sie tun müssen, ist etwa Folgendes:

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

 }

Wenn eine andere Variable in derselben Strg von der Änderung von foo abhängt, benötigen Sie eine Uhr, um foo zu beobachten und Änderungen an dieser Variablen vorzunehmen. Aber solange es sich um eine einfache Referenz handelt, ist das Beobachten nicht erforderlich. Hoffe das hilft.

Sie können den Dienst in $ rootScope einfügen und Folgendes beobachten:

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

In Ihrem Controller:

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

Eine andere Möglichkeit ist die Verwendung einer externen Bibliothek wie: https://github.com/melanke/Watch.JS

Funktioniert mit: IE 9+, FF 4+, SF 5+, WebKit, CH 7+, OP 12+, BESEN, Node.JS, Rhino 1.7+

Sie können die Änderungen eines, mehrerer oder aller Objektattribute beobachten.

Beispiel:

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");​

Sie können die Änderungen innerhalb der Fabrik selbst beobachten und dann eine Änderung senden

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

Dann in Ihrem Controller:

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

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

Auf diese Weise fügen Sie den gesamten zugehörigen Factory-Code in die Beschreibung ein und können sich dann nur auf die Übertragung von außen verlassen

== AKTUALISIERT ==

Sehr einfach jetzt in $ watch.

Stift hier .

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

Aufbauend auf der Antwort dtheodor könnten Sie etwas Ähnliches wie das Folgende verwenden, um sicherzustellen, dass Sie nicht vergessen, die Registrierung des Rückrufs aufzuheben ... Einige lehnen es jedoch möglicherweise ab, den Rückruf $scopean einen Dienst weiterzuleiten.

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 ist eine Erweiterungsmethode, die folgendermaßen aussieht:

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

Hier ist mein allgemeiner Ansatz.

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

    }]);

In Ihrem Controller

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'];

Für diejenigen wie mich, die nur nach einer einfachen Lösung suchen, ist dies fast genau das, was Sie von der Verwendung normaler $ watch in Controllern erwarten. Der einzige Unterschied besteht darin, dass die Zeichenfolge in ihrem Javascript-Kontext und nicht in einem bestimmten Bereich ausgewertet wird. Sie müssen $ rootScope in Ihren Dienst einfügen, obwohl es nur verwendet wird, um sich ordnungsgemäß in die Digest-Zyklen einzubinden.

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

Bei einem sehr ähnlichen Problem habe ich eine Funktion im Gültigkeitsbereich beobachtet und die Funktion die Dienstvariable zurückgeben lassen. Ich habe eine js Geige erstellt . Sie finden den Code unten.

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

Ich kam zu dieser Frage, aber es stellte sich heraus, dass mein Problem darin bestand, dass ich setInterval verwendete, wenn ich den Winkelintervall-Intervall-Anbieter hätte verwenden sollen. Dies gilt auch für setTimeout (verwenden Sie stattdessen $ timeout). Ich weiß, dass es nicht die Antwort auf die Frage des OP ist, aber es könnte einigen helfen, wie es mir geholfen hat.

Ich habe auf dem anderen Thread eine wirklich gute Lösung mit einem ähnlichen Problem gefunden, aber einem völlig anderen Ansatz. Quelle: AngularJS: $ watch in der Direktive funktioniert nicht, wenn der Wert von $ rootScope geändert wird

Grundsätzlich sagt die Lösung dort NICHT zu verwenden, $watchda es sich um eine sehr schwere Lösung handelt. Stattdessen schlagen sie vor, $emitund zu verwenden $on.

Mein Problem war , zu sehen eine Variable in meinem Dienst und reagiert in Richtlinie . Und mit der oben genannten Methode ist es sehr einfach!

Mein Modul / Service-Beispiel:

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

Also im Grunde beobachte ich meinen user - wann immer er auf einen neuen Wert gesetzt wird ich $emiteinen user:changeStatus.

In meinem Fall habe ich in der Richtlinie Folgendes verwendet:

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

Jetzt höre ich in der Direktive auf die $rootScopeund auf die gegebene Änderung - ich reagiere jeweils. Sehr einfach und elegant!

// service: (hier nichts besonderes)

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

// Strg:

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

Ein bisschen hässlich, aber ich habe meinem Dienst die Registrierung von Bereichsvariablen hinzugefügt, um umzuschalten:

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

Und dann in der Steuerung:

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

Schauen Sie sich diesen Plunker an: Dies ist das einfachste Beispiel, das ich mir vorstellen kann

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

Ich habe hier einige schreckliche Beobachtermuster gesehen, die bei großen Anwendungen zu Speicherverlusten führen.

Ich bin vielleicht etwas spät dran, aber so einfach ist das.

Die Überwachungsfunktion sucht nach Referenzänderungen (primitiven Typen), wenn Sie etwas wie Array-Push sehen möchten. Verwenden Sie einfach:

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

Dadurch wird die Referenz aktualisiert und die Uhr von überall aktualisiert. Einschließlich einer Services-Getter-Methode. Alles, was ein Grundelement ist, wird automatisch aktualisiert.

Ich bin zu spät zum Teil, aber ich habe einen schöneren Weg gefunden, dies zu tun als die oben angegebene Antwort. Anstatt eine Variable zuzuweisen, die den Wert der Dienstvariablen enthält, habe ich eine an den Bereich angehängte Funktion erstellt, die die Dienstvariable zurückgibt.

Regler

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

Ich denke, das wird tun, was Sie wollen. Mein Controller überprüft mit dieser Implementierung ständig den Wert meines Dienstes. Ehrlich gesagt ist dies viel einfacher als die ausgewählte Antwort.

Ich habe zwei einfache Dienstprogramme geschrieben, mit denen ich Änderungen der Diensteigenschaften nachverfolgen kann.

Wenn Sie die lange Erklärung überspringen möchten, können Sie zu jsfiddle gehen

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

Dieser Dienst wird in der Steuerung folgendermaßen verwendet: Angenommen, Sie haben einen Dienst "testService" mit den Eigenschaften 'prop1', 'prop2', 'prop3'. Sie möchten die Bereiche 'prop1' und 'prop2' beobachten und ihnen zuweisen. Mit dem Uhrendienst sieht es so aus:

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. apply Watch obj ist großartig, aber es reicht nicht aus, wenn Sie asynchronen Code in Ihrem Dienst haben. In diesem Fall verwende ich ein zweites Dienstprogramm, das so aussieht:

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

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

Ich würde es am Ende meines asynchronen Codes auslösen, um die $ Digest-Schleife auszulösen. So wie das:

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

Das alles zusammen wird also so aussehen (Sie können es ausführen oder die Geige öffnen ):

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