AngularJs中，master-details在细节发生变化时更新master

Question

我有一个AngularJs应用程序，我已经改变了主细节 ui-router 。

以前，我有一个SelectionService与一个普通的JavaScript观察者是主节点用来通知选择，细节节点用来更新自己。的选择只是一个技术标识符，所以DetailsController有从我的BackendService中获取项目，这基本上是一个本地缓存。

现在使用ui-router，当一个项目被选中到master中时，我去details状态和相同的流仍然存在(使用技术id从后端获取详细信息)。

我的问题是，进入前一个版本的所有更新的细节在主服务器上自动更新。但这被ui-router打破了版本，可能是因为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状态开始。然后我选择一个图像进入images.edit状态，一切都很好，当细节发生变化时，主图像会更新。

然而，如果我开始#/images/:key，这是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"在两个控制器中使用getter和setter

你可以使用$scope.$broadcast和$scope.$on使嵌套控制器相互通信

你可以在这里找到详细的例子。

美元范围。$broadcast和$scope.$on

希望对你有帮助

对