$ rootScope nicht in SPA aktualisiert

Question

Mein erster Controller:

angular.module('application') 
.controller('FirstController',['$rootScope',function($rootScope) { 
      var data=[0,1,2]; 
      $rootScope.items=data;   
    }]); 

Mein zweiter Controller:

angular.module('application') 
    .controller('SecondController',['$rootScope',function($rootScope) {      
       $rootScope.items[0]=3; 
       console.log($rootScope.items); // [3,1,2]    
     }]); 

Wenn der zweite Controller ausgeführt wird, seine entsprechende Ansicht geändert wird; Bei der Rückkehr in die entsprechende Ansicht des ersten Controllers (beide Views sind an $rootScope.items gebunden) passiert dies jedoch nicht. Warum das passiert? Ich benutze ui-router und FirstController hat mit der Hauptseite des SPA und SecondController mit einer anderen Seite zu tun. Außerdem mit Spur von $ rootScope.items indem:

<pre> 
    {{$root.items | json}} 
</pre> 

in beiden Schablonen, um die zweite zu [3,1,2] erneuert wird, und die erste, Reste [0,1,2].

Answer 1

Das Übergeben des gleichen $ Scope zwischen den beiden Controllern ist keine ideale Methode zur Verwaltung eines einzelnen Datenmodells. Sie müssen lediglich ein Servicemodul (oder eine Factory) einrichten, um die Daten für Sie zu verwalten. damit beide Controller mit dem Faktor für Ihre Daten sprechen können.

Dies ist, wie Sie die Fabrik

app.factory("Data", 
    function() { 
     var storage = [0,1,2]; // where your data is 
     return { 
      get: function() { 
      return storage; 
      }, 
      set: function (toSet) { 
      storage = toSet; 
      return storage; 
      } 
     }; 
}); 

die Controller wissen zu lassen, eingerichtet, in dem die Daten, verwenden Sie für den zweiten Controller

app.controller ("FirstController", 
function ($scope, Data) 
{ 
    console.log(Data); // [0,1,2] 
    Data.set([3,1,2]); // demoing change 
} 

gleichen Sie

ist

app.controller ("FirstController", 
function ($scope, Data) 
{ 
    console.log(Data); // [3,1,2] 
}