在路由视图中保留范围

时间:2013-07-09 23:59:27

标签: angularjs

我有一个SPA,其中包含登录页面上显示的客户列表。每个客户端都有一个编辑按钮,如果单击该按钮,则会将我带到所选客户端的“编辑”视图。

我不确定如何解决这个问题 - 到目前为止我看到的所有路线都只是在$ routeParams中获取我的客户端ID,然后大多数示例将从工厂中取出客户端通过那个Id。

但是我已经拥有了我的客户......当我已经拥有它时,再次点击我的web api网站似乎是一种浪费。是否可以路由到新视图并在$ scope中维护选定的客户端? 编辑: 这就是我所做的 - 我不知道它是否比Clarks的反应更好或更差......我只是做了以下角度服务:

app.service('clientService', function () {
    var client = null;

    this.getClient = function () {
        return client;
    };

    this.setClient = function (selectedClient) {
        client = selectedClient;
    };
});

然后对于需要该数据的任何控制器:

$scope.client = clientService.getClient();

这似乎工作得很好......但是很想知道这是好还是坏。

1 个答案:

答案 0 :(得分:1)

取决于您想要的缓存级别。

您可以依赖浏览器缓存,在这种情况下,正确的HTTP标头就足够了。

你可以依赖于$ http在angular中提供的缓存,在这种情况下,确保你发送的参数相同就足够了。

您还可以按照以下方式创建自己的模型缓存:

module.factory('ClientModel', function($http, $cacheFactory, $q){
    var cache = $cacheFactory('ClientModel');
    return {
        get : function(id){
            var data = cache.get(id);
            if(data){
                //Using $q.when to keep the method asynchronous even if data is coming from cache
                return $q.when(data);
            } else {
                //Your service logic here:
                var promise = $http.get('/foo/bar', params).then(function(response){
                    //Your model logic here
                    var data = response;
                    cache.put(id, data);
                    return response;
                }, function(response){
                    cache.remove(id);
                    return response;
                });
                //Store the promise so multiple concurrent calls will only make 1 http request
                cache.put(id, promise);
                return promise;
            }
        },
        clear : function(id){
            if(angular.isDefined(id)){
                cache.remove(id);
            } else {
                cache.removeAll();
            }
        }
    }
});

module.controller('ControllerA', function(ClientModel){
    ClientModel.get(1).then(function(){
        //Do what you want here
    });
});

module.controller('ControllerB', function(ClientModel){
    ClientModel.get(1).then(function(){
        //Do what you want here
    });
});

这意味着每当您请求具有相同“id”的客户端对象时,您将获得相同的对象。