詳細を変更すると、AngularJs、マスター詳細更新マスター

Question

私は使用するように変更したマスターの詳細を持つAngularJsアプリを持っています ui-router

以前、私は選択を通知するために、マスターが使用する たJavaScriptのオブザーバープレーンとSelectionServiceを有しており、詳細によって自分自身を更新します。 の選択は技術的な識別子にすぎず、DetailsControllerには があり、基本的にはローカルキャッシュであるBackendServiceからアイテムを取得しています。

アイテムがマスターに選択されたときにui-routerを使用すると、詳細 の状態になり、同じフローが残ります（バックエンドから詳細を取得するために技術IDを使用します）。

私の問題は、以前のバージョンではすべての更新が詳細で行われたことです。 マスター上で自動的に更新されます。しかしそれはおそらくMasterControllerとDetailsControllerが が同じスコープを共有していないため、ui-router バージョンで壊れています。

私の質問は次のとおりです。 アイテムが変更されたときにアイテムのリストが更新されるようにするにはどうすればよいですか。あなたはAngularJsのいくつかの機能に頼っていますか（それでどうすればいいですか） 古典的なイベントメカニズムを$scope.$broadcastと$scope.$onで使用していますか？

編集は、より多くの調査

た後、私はAngularJsイベント（$scope.$broadcast、$scope.$emitと$scope.$on）の使用に対して明らかにされているいくつかの記事を読んで、カスタムイベントバス/アグリゲータをrecommandています。 しかし、私はそれを避け、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状態の開始を開いたときに、これは、だから、原因の状態に

です。次に、1つのイメージを選択して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」（すべてのコントローラが同じオブジェクトを共有する）

Nを作るために$scope.$broadcastと$scope.$onを使用することができコントローラーがお互いにコミュニケートしていることを確認してください。

ここで詳細な例が見つかります。

$scope.$broadcast and $scope.$on

よろしく