Question

这是问题所在。我收到$http.get(url, {cache: true})项，并分配给$scope.items。这很好。然后我删除列表中的项目。我发送$http删除，然后从$scope.items.splice($index, 1)拼接项目。所以项目从列表中删除。

现在我去了我的应用的另一页面。当我回来时，我会看到所有项目，包括我删除的项目。

UserApi.getCoachProfiles().success(function(data) {
    if(!data.error) {
        $scope.data.profiles = data.result;
    }
});

$scope.delete = function(id, index) {
    UserApi.deleteProfiles(id).success(function(data) {
        if(!data.error) {
            $scope.data.profiles.splice(index, 1);
        }
    });
}

像这样。

我正在使用UI路由器状态。

Answer 1

为什么不使用$cacheFactory中的缓存，而不是使用{cache: true}选项。从$cacheFactory实例分配缓存，每当删除项目时，只需删除缓存实例中的所有项目，$http只会在调用时调用另一个http请求。

示例，我们假设您有一个ItemService，其query()和remove()方法用于获取项目和删除项目。创建要在每个$cacheFactory请求中分配的$http.get()实例，并在删除列表中的项目时为该缓存实例执行removeAll()。

DEMO

  .service('ItemsService', function($http, $cacheFactory) {

    var cache = $cacheFactory('items');

    this.query = function() {
      return $http.get('/items', {cache: cache});
    };

    this.remove = function(id) {
      return $http.delete('/items/' + id).then(function(result) {
        // removeAll() when DELETE request was successful
        cache.removeAll();
        return result;
      });
    };

  })

  .run(function(ItemsService) {

    console.log('get all items');
    ItemsService.query()

      .then(function(response) {
        console.log(response.data);
        console.log('removing one item');
        return ItemsService.remove('e456j7h3g4534w65eh56gw456546g001');
      })

      .then(function() {
        console.log('get all items again');
        return ItemsService.query();
      })

      .then(function(response) {
        console.log(response.data);
      });

  });

Answer 2

当您在{ cache: true }电话中使用$http.get()时，Angular正在做的是记录一个键入Url的$templateCache条目。关于$templateCache的Angular网站的文档很少，但source code显示了公共remove()方法。

知道了这一点，将$ templateCache注入到调用$ scope.delete函数的任何控制器或指令中。您需要使用`$ templateCache

删除调用以使用您最初检索它们的相同URL从缓存中获取所有项目

如何缓存$ http但也能够在angularjs中删除？

2 个答案: