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

时间:2016-06-29 14:49:27

标签: angularjs master-detail

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

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

现在使用ui-router,当一个项目被选入主服务器时,我会详细说明 状态和相同的流程仍然存在(使用技术ID从后端获取详细信息)。

我的问题是,在之前的版本中对细节进行了所有更新 在主服务器上自动更新的地方。但是ui-router打破了这个问题 版本,可能是因为MasterControllerDetailsController没有 分享相同的范围。

所以,我的问题是:如何确保在一个项目列表中更新项目列表 项目已更改。你依靠一些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状态,那么主设备会忽略对主设备所做的所有更改。

1 个答案:

答案 0 :(得分:0)

您可以依赖于您提到的解决方案

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”

  1. 您可以使用$scope.$broadcast$scope.$on使嵌套的控制器相互通信
  2. 你可以在这里找到详细的例子。

    $scope.$broadcast and $scope.$on

    希望这会有所帮助

    此致