Aktualisieren Sie den Bereichswert, wenn die Servicedaten geändert werden

Ich habe den folgenden Dienst in meiner App:

uaInProgressApp.factory('uaProgressService', 
    function(uaApiInterface, $timeout, $rootScope){
        var factory = {};
        factory.taskResource = uaApiInterface.taskResource()
        factory.taskList = [];
        factory.cron = undefined;
        factory.updateTaskList = function() {
            factory.taskResource.query(function(data){
                factory.taskList = data;
                $rootScope.$digest
                console.log(factory.taskList);
            });
            factory.cron = $timeout(factory.updateTaskList, 5000);
        }

        factory.startCron = function () {
            factory.cron = $timeout(factory.updateTaskList, 5000);
        }

        factory.stopCron = function (){
            $timeout.cancel(factory.cron);
        }
        return factory;
});

Dann benutze ich es in einem Controller wie diesem:

uaInProgressApp.controller('ua.InProgressController',
    function ($scope, $rootScope, $routeParams, uaContext, uaProgressService) {
        uaContext.getSession().then(function(){
            uaContext.appName.set('Testing house');
            uaContext.subAppName.set('In progress');
            uaProgressService.startCron();

            $scope.taskList = uaProgressService.taskList;
        });
    }
);

Also im Grunde meine Service - Update factory.taskListalle 5 Sekunden und ich verknüpfen diese factory.taskListzu $scope.taskList. Ich habe dann verschiedene Methoden ausprobiert $apply, $digestaber Änderungen an factory.taskListwerden nicht in meinem Controller und meiner Ansicht wiedergegeben $scope.taskList.

Es bleibt in meiner Vorlage leer. Wissen Sie, wie ich diese Änderungen verbreiten kann?

Während dem Benutzen $watch das Problem lösen kann, ist es nicht die effizienteste Lösung. Möglicherweise möchten Sie die Art und Weise ändern, in der Sie die Daten im Dienst speichern.

Das Problem besteht darin, dass Sie den Speicherort, dem Sie taskListzugeordnet sind, jedes Mal ersetzen , wenn Sie ihm einen neuen Wert zuweisen, während der Bereich nicht mehr auf den alten Speicherort verweist. Sie können dies in diesem Plunk sehen .

Machen Sie mit Chrome beim ersten Laden des Plunks Heap-Snapshots. Nachdem Sie auf die Schaltfläche geklickt haben, werden Sie feststellen, dass der Speicherort, auf den der Bereich verweist, niemals aktualisiert wird, während die Liste auf einen anderen Speicherort verweist.

Sie können dies leicht beheben, indem Ihr Dienst ein Objekt enthält, das die Variable enthält, die sich möglicherweise ändert (so etwas wie data:{task:[], x:[], z:[]}). In diesem Fall sollten "Daten" niemals geändert werden, aber jedes seiner Mitglieder kann jederzeit geändert werden. Sie übergeben diese Datenvariable dann an den Gültigkeitsbereich und, solange Sie sie nicht überschreiben, indem Sie versuchen, "Daten" einem anderen zuzuweisen, wird der Gültigkeitsbereich bei jeder Änderung eines Felds in den Daten darüber informiert und korrekt aktualisiert.

Dieser Plunk zeigt dasselbe Beispiel, das mit dem oben vorgeschlagenen Fix ausgeführt wird. In dieser Situation müssen keine Beobachter verwendet werden. Wenn in der Ansicht jemals etwas nicht aktualisiert wird, wissen Sie, dass Sie lediglich einen Bereich ausführen müssen$apply zum Aktualisieren der Ansicht .

Auf diese Weise müssen Sie keine Beobachter mehr verwenden, die häufig Variablen auf Änderungen vergleichen, und das hässliche Setup ist erforderlich, wenn Sie viele Variablen überwachen müssen. Das einzige Problem bei diesem Ansatz ist, dass Sie in Ihrer Ansicht (HTML) "Daten" haben. Stellen Sie alles voran, wo Sie früher nur den Variablennamen hatten.

Angular (im Gegensatz zu Ember und einigen anderen Frameworks) bietet keine speziell verpackten Objekte, die halbmagisch synchron bleiben. Die Objekte , die Sie manipulieren sind einfache JavaScript - Objekte und einfach wie zu sagen , var a = b;nicht verknüpfen die Variablen aund b, sagen $scope.taskList = uaProgressService.taskListverknüpfen nicht diese beiden Werte.

Für diese Art von link-ing angularsorgt $watchon$scope . Sie können den Wert von beobachten uaProgressService.taskListund den Wert aktualisieren, $scopewenn er sich ändert:

$scope.$watch(function () { return uaProgressService.taskList }, function (newVal, oldVal) {
    if (typeof newVal !== 'undefined') {
        $scope.taskList = uaProgressService.taskList;
    }
});

Der erste an die $watchFunktion übergebene Ausdruck wird in jeder $digestSchleife ausgeführt, und das zweite Argument ist die Funktion, die mit dem neuen und dem alten Wert aufgerufen wird.

Ich bin nicht sicher, ob das hilft, aber ich binde die Funktion an $ scope.value. Zum Beispiel

angular
  .module("testApp", [])
  .service("myDataService", function(){
    this.dataContainer = {
      valA : "car",
      valB : "bike"
    }
  })
  .controller("testCtrl", [
    "$scope",
    "myDataService",
    function($scope, myDataService){
      $scope.data = function(){
        return myDataService.dataContainer;
      };
  }]);

Dann binde ich es einfach in DOM als

<li ng-repeat="(key,value) in data() "></li>

Auf diese Weise können Sie vermeiden, $ watch in Ihrem Code zu verwenden.

Nein $watchoder etc. ist erforderlich. Sie können einfach Folgendes definieren

uaInProgressApp.controller('ua.InProgressController',
  function ($scope, $rootScope, $routeParams, uaContext, uaProgressService) {
    uaContext.getSession().then(function(){
        uaContext.appName.set('Testing house');
        uaContext.subAppName.set('In progress');
        uaProgressService.startCron();
    });

    $scope.getTaskList = function() {
      return uaProgressService.taskList;
    };
  });

Da die Funktion getTaskListzu $scopeihrem Rückgabewert gehört, wird sie bei jeder Änderung von ausgewertet (und aktualisiert)uaProgressService.taskList

Eine einfache Alternative besteht darin, dass Sie während der Controller-Initialisierung ein im Service eingerichtetes Benachrichtigungsmuster abonnieren.

Etwas wie:

app.controller('YourCtrl'['yourSvc', function(yourSvc){
    yourSvc.awaitUpdate('YourCtrl',function(){
        $scope.someValue = yourSvc.someValue;
    });
}]);

Und der Service hat so etwas wie:

app.service('yourSvc', ['$http',function($http){
    var self = this;
    self.notificationSubscribers={};
    self.awaitUpdate=function(key,callback){
        self.notificationSubscribers[key]=callback;
    };
    self.notifySubscribers=function(){
        angular.forEach(self.notificationSubscribers,
            function(callback,key){
                callback();
            });
    };
    $http.get('someUrl').then(
        function(response){
            self.importantData=response.data;
            self.notifySubscribers();
        }
    );
}]);

Auf diese Weise können Sie eine genauere Feinabstimmung vornehmen, wenn Ihre Controller von einem Dienst aktualisiert werden.

Wie Gabriel Piacenti sagte, werden keine Uhren benötigt, wenn Sie die sich ändernden Daten in ein Objekt einwickeln.

ABER um die geänderten Servicedaten im Bereich korrekt zu aktualisieren, ist es wichtig, dass der Bereichswert des Controllers, der die Servicedaten verwendet, nicht direkt auf die sich ändernden Daten (Feld) verweist. Stattdessen muss der Bereichswert auf das Objekt verweisen, das die sich ändernden Daten umschließt.

Der folgende Code sollte dies klarer erklären. In meinem Beispiel verwende ich einen NLS-Dienst zum Übersetzen. Die NLS-Token werden über http aktualisiert.

Der Service:

app.factory('nlsService', ['$http', function($http) {
  var data = {
    get: {
      ressources        : "gdc.ressources",
      maintenance       : "gdc.mm.maintenance",
      prewarning        : "gdc.mobMaint.prewarning",
    }
  };
// ... asynchron change the data.get = ajaxResult.data... 
  return data;
}]);

Controller- und Scope-Ausdruck

app.controller('MenuCtrl', function($scope, nlsService)
  {
    $scope.NLS = nlsService;
  }
);

<div ng-controller="MenuCtrl">
  <span class="navPanelLiItemText">{{NLS.get.maintenance}}</span>
</div>

Der obige Code funktioniert, aber zuerst wollte ich direkt auf meine NLS-Token zugreifen (siehe folgendes Snippet) und hier wurden die Werte nicht aktualisiert.

app.controller('MenuCtrl', function($scope, nlsService)
  {
    $scope.NLS = nlsService.get;
  }
);

<div ng-controller="MenuCtrl">
  <span class="navPanelLiItemText">{{NLS.maintenance}}</span>
</div>