Eckiger Service, der den Wert nicht erwartungsgemäß freigibt

Question

Ich habe ein Problem, Werte in meinem Dienst vom Controller zu bekommen. Mein Service sieht wie folgt aus:

angular.module('someApp').factory('someSvc', SomeSvc); 

function SomeSvc($http) { 
    var colors = []; 
    function loadColors() { 
     return $http.get('SomeApi/GetColors') 
      .then(function (result) { 
       //colors = result.data.colors;//<-this doesn't work 
       //angular.copy(result.data.colors, colors);//<-this works 
      }); 
    } 
    return { 
     loadColors: loadColors, 
     colors: colors 
    }; 
} 

Dann mein Controller einen Anruf wie diese machen könnte:

someSvc.loadColors().then(function(){vm.colors = someSvc.colors;}); 

Also, wenn ich debuggen, wenn ich einen Haltepunkt in der Steuerung gesetzt, wo die Zuordnung vm. colors wird erstellt, die colors-Eigenschaft, die auf dem someService-Objekt verfügbar gemacht wird, hat nur ein leeres Array oder ein Array mit den erwarteten Werten, abhängig davon, welche der beiden auskommentierten Zeilen ich im Service verwende.

Wenn ich einen Haltepunkt in dem Dienst setze, wo die Zuordnung zu Farben vorgenommen wird, haben die variablen Farben immer die erwarteten Werte (z. B. ["rot", "gelb", "grün"] ist was zurückkommt vom http Anruf). So kann ich beobachten, wie der Controller den http-Aufruf auslöst, den Wert zurückschaut und den Farben im Dienst zugewiesen wird, aber dann sieht der Controller nur ein leeres Array, wenn ich diesen angular.copy-Aufruf nicht mache.

Auch interessant ist, wenn ich den Dienst der return-Anweisung zu sehen wie folgt zu ändern:

return { 
    loadColors: loadColors, 
    colors: function() {return colors;} 
}; 

und dann in der Steuerung sagen vm.colors = someSvc.colors(); dann, dass gerade fein wie gut funktioniert.

Warum ist das? Warum wird dieses Array nicht durchgelassen?

UPDATE: ich gefunden habe, dass anstelle die angular.copy() Linie, ich kann diese alternativ tun, und alles funktioniert wie erwartet:

for (var i = 0; i < result.data.colors.length; i++) { 
    colors[i] = result.data.colors[i]; 
} 

Es scheint zu sein, dass das Objekt ASSIGNING ist ein Problem, beim Modifizieren ist es in Ordnung? Warum das?

Answer 1

Dies könnte für Sie arbeiten. Vermutung, es ist nur ein Zeiger Problem vielleicht?

angular.module('someApp') 

.factory('someSvc', function($http) 
{ 
    return { 
    colors: [], 
    loadColors: function() 
    { 
     var self = this; 

     return $http.get('SomeApi/GetColors').then(function (result) 
     { 
     self.colors = result.data.colors; 
     }); 
    } 
    }; 
}); 

Answer 2

Zu der Zeit sind Sie return in Ihrem Werk anrufen, someSvc.colors ist nur die leere Array - und der Wert zurückgegeben wird. Da Angular Provider im Allgemeinen versuchen, nur einmal zu laufen, überprüft sie in der Zukunft someSvc.colors nicht erneut - gibt nur den Anfangswert zurück.

Wenn Sie es in eine Funktion einfügen, wird die Funktion jedes Mal ausgeführt, sodass der aktualisierte Wert abgerufen wird.