Question

我有一个AngularJs应用程序，其中包含我已更改使用的主要详细信息 UI-路由器。

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

现在使用ui-router，当一个项目被选入主服务器时，我会详细说明状态和相同的流程仍然存在（使用技术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){

});

你可以在不同的视图中注入这些控制器，并且可以使用getter和setter在两个控制器中访问singleton factory（所有控制器将共享同一个对象）“myfactory”

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

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

$scope.$broadcast and $scope.$on

希望这会有所帮助

此致

当细节发生变化时，AngularJs，主要细节更新主人

1 个答案: