angularjs - 在 angular.js 中缓存并设置范围值

Question

我有一个多标签应用程序，有两个单独的 Controller 。

当输入任一选项卡时，我需要点击一个 API。初始点击后响应不会更新，因此在后续访问该选项卡时无需再次点击它。

我的问题是缓存 API 响应并将其设置为范围变量的正确方法是什么。

目前，我有一个这样的帮助功能设置

var setAndCache = function(scope, cacheFactory, cacheKey, cacheValue) {
  scope[cacheKey] = cacheValue;
  cacheFactory.put(cacheKey, cacheValue);
};

像这样的缓存工厂设置

factory('TabData', function($cacheFactory) {
  return $cacheFactory('tabData');
}).

注入(inject)到每个 Controller 中

controller('TabOne', function($scope, $http, TabData) {

  var setupCache = function(response) {
    setAndCache($scope, TabData, 'tabOneData', response);
  };

  if (!TabData.get('tabOneData')) {
    $http.get('/path/to/api')
    .success(function(response) {
      setupCache(response);
    });
  }
  else {
    setupCache(TabData.get('tabOneData'));
  }

这很好用，但感觉……很脏。
有没有更好的方法来实现同样的目标？

Answer 1

我自己一直在处理资源缓存。到目前为止，这是我的做法。

我从一个 cacheManager 服务开始:

app.factory('cacheManager', function($cacheFactory) {
    var cache = $cacheFactory('resource');

    return {

    /**
     * This will handle caching individual resource records
     * @param  CacheId string where we expect this to be stored in the cache
     * @param  Resource resource The resource object that we want to get
     * @param  Object param An object of params to pass to resource.get
     * @param  Function callback
     * @return resource object
     */
    fetchResource: function(cacheId, resource, params, callback) {
        var result = cache.get(cacheId);

        // See if we had a valid record from cache
        if(result) {
            console.log("cache hit: " + cacheId);
            callback(result);
            return result;
        } else {
            console.log("cache miss: " + cacheId);
            result = resource.get(params, function(response) {
                if(response.error) {
                    // We don't have a valid resource, just execute the callback
                    callback(response);
                    return false;
                }
                console.log("putting resource in cache");
                cache.put(cacheId, response);
                callback(response);
            });
            return result;
        }
    },
    <snip update/delete methods, etc>

然后在我的 Controller 中，我注入(inject) cacheManager 服务和我的项目资源(例如)，然后可以执行以下操作:

$scope.data = cacheManager.fetchResource('project.' + $scope.id, Project, {id: $scope.id}, function(response) {
        ...
});

我喜欢这让我的 Controller 保持清洁。

我知道在您的情况下您直接使用 $http 而不是资源，但可以使用相同的方法。我个人建议将尽可能多的逻辑抽象到缓存包装服务中，并尽量减少每个 Controller 的开销。

更新:

正如下面在评论中提到的，有一个更简单的资源缓存值得一看。我最初是从这个示例开始的，然后将它构建到我现在使用的上面。

angularjs: how to add caching to resource object?