AngularJs，詳細更改時主控細節更新大師

Question

我有一個AngularJs應用程序，我已更改爲使用 ui-router。

此前，我有一個SelectionService與一個普通的JavaScript觀察員是 由主人用來通知選擇和細節更新自己。 選擇只是一個技術標識符，所以DetailsController有 從我的BackendService獲得項目，這基本上是本地緩存。

現在隨着ui路由器，當一個項目被選入主，我去詳細 狀態和相同的流程仍然（使用技術ID從後端獲取詳細信息）。

我的問題是，進入以前的版本所有更新在細節 所做的自動更新在主。但是，這是破壞與UI路由器 版本，可能是因爲MasterController和DetailsController不 共享相同的範圍。

所以，我的問題是：當一個 項目發生變化時，如何確保項目列表已更新。你是否依賴一些AngularJs功能（或如何）或者使用$scope.$broadcast和$scope.$on的經典事件機制？

編輯，更多的調查

後我看了一些文章，是明確反對的AngularJs事件（$scope.$broadcast，$scope.$emit和$scope.$on）的使用和推薦的自定義事件總線/聚合器。 但我想避免這種情況，因此依賴於AngularJs消化生命週期。然而，@ Kashif ali的建議是什麼，但我的主人沒有更新細節的變化。

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

編輯，這是由於美國

所以，當我打開應用程序上＃/圖像的images狀態開始。然後我選擇一個圖像進入images.edit狀態，並且一切正常，當細節更改時主機會更新。

但是，如果我從＃/ images /：鑰匙開始，這是images.edit狀態，則主站將忽略對主站所做的所有更改。

Answer 1

你可以依靠你提到的解決方案

1。你可以做到這一點使用工廠angularjs

工廠/服務是沿着應用程序共享的單一對象： 例如：

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){ 

}); 

你可以注入不同的觀點，這些控制器可以訪問單廠使用獲取和設置在這兩個控制器（控制器的所有將共享相同的對象）「myfactory」

可以使用$scope.$broadcast和$scope.$on使用n ested控制器相互溝通

你可以在這裏找到詳細的例子。

$scope.$broadcast and $scope.$on

希望將是有益的

問候