AngularJs, Master-Details Update-Master, wenn Details ändern

Question

Ich habe eine AngularJs App mit einem Master-Details, die ich geändert habe, um UI-Router zu verwenden.

Zuvor hatte ich eine SelectionService mit einem normalen JavaScript-Beobachter, der vom Master verwendet wurde, um die Auswahl zu benachrichtigen und durch die Details selbst zu aktualisieren. Die Auswahl war nur eine technische Kennung, so dass die DetailsController hat , um das Element von meinem BackendService, die im Grunde ein lokaler Cache ist.

Jetzt mit UI-Router, wenn ein Element in den Master ausgewählt ist, gehe ich die Details Zustand und der gleiche Fluss bleibt (verwenden Sie die technische ID, um Details aus dem Back-End zu erhalten).

Mein Problem ist, dass in der vorherigen Version alle Updates auf die Details wo automatisch auf dem Master aktualisiert aktualisiert. Aber das ist mit dem UI-Router Version gebrochen, wahrscheinlich, weil die MasterController und DetailsController nicht teilen den gleichen Umfang.

Also meine Frage ist: Wie stellen Sie sicher, dass eine Liste von Elementen aktualisiert wird, wenn ein Artikel geändert wird. Sind Sie auf einige AngularJs Funktionalitäten angewiesen (wie) oder verwenden Sie einen klassischen Ereignismechanismus mit $scope.$broadcast und $scope.$on?

bearbeiten, nach mehr Untersuchungen

Ich habe einige Artikel gelesen, die eindeutig gegen die Nutzung von AngularJS Ereignisse ($scope.$broadcast, $scope.$emit und $scope.$on) und ein benutzerdefiniertes Ereignis Bus/Aggregator empfehlen. Aber ich würde das gerne vermeiden und mich daher auf den AngularJs-Digest-Lebenszyklus verlassen. Was jedoch von @Kashif ali vorgeschlagen wird, ist, was ich habe, aber mein Master wird nicht aktualisiert, wenn sich die Details ändern.

angular 
    .module('masterDetails') 
    .service('BackendService', function($q){ 
     var cache = undefined; 
     var Service = {} 
     Service.GetImages = function() { 
      var deferred = $q.defer(); 
      var promise = deferred.promise; 
      if (!cache) { 
       // HTTP GET from server .then(function(response){ 
        cache = JSON.parse(response.data); 
        deferred.resolve(cache); 
       }); 
      } else { 
       deferred.resolve(cache); 
      } 
      return promise; 
     } 
     Service.GetImage = function(key) { 
      return GetImages().then(function(images){ 
       return images[key]; 
      }); 
     } 
     Service.SetImage = function(key, updated) { 
      GetImages().then(function(images){ 
       images[key] = updated; 
       // TODO; HTTP PUT to server 
      }); 
     } 
    }) 
    .controller('MasterController', function(BackendService){ 
     var vm = this; 
     vm.items = []; 
     vm.onSelect = onSelect; 

     init(); 

     function init() { 
      BackendService.GetImages().then(function(images){ 
       // images is a map of { key:String -> Image:Object } 
       vm.items = Object.keys(images).map(function(key){ 
        return images[key]; 
       }); 
      }); 
     } 

     function onSelect(image) { 
      $state.go('state.to.details', {key: image.key}); 
     } 
    }) 
    .controller('DetailsController', function(BackendService, $stateParams){ 
     var vm = this; 
     vm.image = undefined; 

     init(); 

     function init() { 
      BackendService.GetImage($stateParams.key).then(function(image){ 
       vm.image = image; 
      }).then(function(){ 
       // required to trigger update on the BackendService 
       $scope.$watch('[vm.image.title, vm.image.tags]', function(newVal, oldVal){ 
        BackendService.SetImage(vm.image.key, vm.image); 
       }, true); 
      }); 
     } 
    }); 

bearbeiten, ist dies aufgrund der Zustände

Also, wenn ich öffnen Sie die App auf #/Bilder der images Zustand Start. Dann wähle ich ein Bild aus, um in den Zustand images.edit zu gelangen, und alles funktioniert gut, der Master wird aktualisiert, wenn sich die Details ändern.

Allerdings, wenn ich auf #/Bilder Start /: Taste was der images.edit Zustand, dann wird der Master alle Änderungen erzielt bei dem Master ignorieren.

Answer 1

Sie können die Lösung auf beiden verlassen Sie

1 erwähnt haben.Sie können dies mit Fabriken in AngularJS erreichen

Fabriken/Dienstleistungen sind die Singleton-Objekte, die entlang der App geteilt wird: Beispiel:

angular.module("app",[]).factory('myfactory',function(){ 
var data; 
{ 
getData:getData, 
setData:setData 
}; 
function setData(data1) 
{ 
data=data1; 
} 
function getData() 
{ 
return data; 
} 
} 
).controller('myclrl1',function($scope,myfactory){ 

}).controller('myclrl2',function($scope,myfactory){ 

}); 

Sie diese Controller in verschiedenen Ansichten injizieren kann und Singletons Fabrik zugreifen können (alle Regler das gleiche Objekt teilen) "myfactory" sowohl Controller Getter und Setter

2. Sie $scope.$broadcast verwenden können und $scope.$on n machen ested controllers miteinander zu kommunizieren

finden Sie das detaillierte Beispiel hier.

$scope.$broadcast and $scope.$on

Hoffnung, die

Grüße