保留路由视图中的范围 [英] Preserving scope across routed views

问题描述

我有一个SPA，其登录页面上显示了一个客户列表.每个客户端都有一个编辑"按钮，如果单击该按钮，则将带我进入所选客户端的编辑"视图.

I have a SPA with a list of Clients displayed on the landing page. Each client has an edit button, which if clicked should take me to an Edit view for that selected Client.

我不确定该怎么做-到目前为止，我所看到的所有路由都只会将我的客户ID放在$ routeParams中，然后大多数示例将根据该ID将客户从工厂拉出.

I'm not sure how to go about this- all the routes I've seen so far will just take my client id in the $routeParams, and then most examples will then pull the Client from a factory by that Id.

但是我已经拥有我的客户...当我已经拥有它时，再次访问我的Web api网站似乎很浪费.是否可以路由到新视图并在$ scope中维护选定的Client?这就是我所做的-我不知道它比Clarks的响应好还是坏...我只是做了以下角度服务:

But I already HAVE my Client... seems a waste to hit my web api site again when I already have it. Is it possible to route to the new view and maintain the selected Client in the $scope? This is what I did- I don't know if it's better or worse than Clarks response... I just made the following angular service:

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

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

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

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

And then for any controller that needs that data:

$scope.client = clientService.getClient();

这似乎很好用...但是很想听听这是好是坏.

This seemed to work fine... but would love to hear how this is good or bad.

推荐答案

取决于所需的缓存级别.

Depends on what level of caching you want.

您可以依靠浏览器缓存，在这种情况下，适当的HTTP标头就足够了.

You could depend on browser caching, in which case proper HTTP headers will suffice.

您可以依靠$ http提供的角度缓存，在这种情况下，确保发送的参数相同就足够了.

You could depend on cache provided by $http in angular, in which case making sure the parameters you send up are the same would be sufficient.

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

You could also create your own model caching along the lines of :

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"的客户端对象时，您都将获得相同的对象.

Which would mean each time you request a client object with the same 'id', you would get the same object back.

这篇关于保留路由视图中的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！