缓存数据和更新另一个对象的图表不起作用 [英] Caching data and updating another object for an chart does not work

问题描述

在我的控制，我从缓存服务捆绑$资源对象查询数据。

In my Controller, I'm quering data from a $resource object bundled in a caching service.

$scope.data = myService.query(); //myService caches the response. 

在同一控制器我有一个图表的配置（用于GoogleChartingDirectve）

In the same controller I have the configuration for a chart (for the GoogleChartingDirectve).

$scope.chart = {
      'type': 'AreaChart',
      'cssStyle': 'height:400px; width:600px;',
....
      'rows' : convert($scope.data),
...
}

转换只是一个功能从为myService获取数据，然后返回数组图表。

convert is just a function which takes the data from myService and returns an array for the chart.

这是唯一的工作，如果查询的响应已经被缓存（改变路线后，我上图可以看到，但如果我直接调用其路由为空）。

This is only working, if the response of the query has already been cached (After changing the route, I can see the graph, but if I call the route directly it is empty).

也许问题是我的缓存？

angular.module('webApp')
  .service('myService', function myService($cacheFactory,res) {
    var cache = $cacheFactory('resCache');

   return {
      query: function() {
         var data = cache.get('query');
         if (!data) {
            data = res.query();
            cache.put('query', data);
         }
         return data;
      }
   };

}）;

我试过在我的控制范围$，$腕表。它是一个不带数据发射一次。如果我改变到一个不同的途径，并再次被再次烧制这次数据。

I've tried the $scope.$watch in my Controller. It is fired only once with no data. If I change to a different route and back again it is fired again; this time with data.

$scope.$watch('data',function(newValue){
      console.log("Watch called " + newValue);
}

我不知道这个问题实际上是什么。
它看起来像$手表事件丢失。

I'm not sure what the problem actually is. It looks like the $watch event is missing.

如果我把一个按钮的刷新，$手表被触发，数据显示。

If I call the refresh with a button, $watch is fired and data is shown.

$scope.refresh = function(){
      $scope.data = $scope.data.concat([]);
}

我只是一个角度新手，在一个小的演示项目玩耍。
所以我在寻找解决一些常见问题的最佳途径。

I'm just an angular newbie and playing around in a small demo project. So I'm looking for the best way to solve some common problems.

不知道如何解决我的问题？

Any idea how to solve my problem?

推荐答案

我想这个问题是你不知道 res.query（）是一个异步调用。在 $资源服务的工作原理如下：查询电话立刻返回数据空数组。如果数据从服务器返回数组中填充数据。你的 $腕表是，如果空数组分配给您的 $ scope.data 变量调用。你可以，如果你使用的是 $ watchCollection 函数（的 http://docs.angularjs.org/api/ng $ rootScope.Scope）：

I guess the problem is that you are not aware that res.query() is an asynchronous call. The $resource service works as follow: the query call returns immediatly an empty array for your data. If the data are return from the server the array is populated with your data. Your $watch is called if the empty array is assigned to your $scope.data variable. You can solve your problem if you are using the $watchCollection function (http://docs.angularjs.org/api/ng.$rootScope.Scope):

$scope.$watchCollection('data', function(newNames, oldNames) {
  var convertedData = convert($scope.data);
  ...
});

您缓存工作的权利。如果你把你的服务器的呼叫后再次你得到所有数据填充的数组。顺便说一句。在 $的ressource 服务具有高速缓存选项（的http：/ 。/docs.angularjs.org/api/ngResource $资源） - 所以你不需要实现自己的缓存

Your cache is working right. If you make your server call later again you got the array with all populated data. Btw. the $ressource service has a cache option (http://docs.angularjs.org/api/ngResource.$resource) - so you don't need to implement your own cache.

您可能会问，为什么 $的ressource 服务的工作方式 - 例如，返回一个空数组，后来填充数据？这是角度的方式。如果你想在使用您的数据NG-重复中的数据presented到视图自动，因为 NG-重复手表您的收藏。我猜你图是一个典型的JavaScript（例如jQuery的）不看你的数据。

You may ask why the $ressource service works in that way - e.g. returning an empty array and populating the data later? It's the angular way. If you would use your data in a ng-repeat the data are presented to the view automatically because ng-repeat watches your collection. I guess you chart is a typical javascript (for example jQuery) that doesn't watch your data.

这篇关于缓存数据和更新另一个对象的图表不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！