Question

我正在处理一个任务，我在仪表板上有一堆小部件。当用户在仪表板上更改客户时，会重新加载$state，并且小部件会被重新加载。位置应保存到缓存中，但应刷新与窗口小部件相关的数据。有两个相关组件，一个用于更改客户的标题组件，以及小组件所在的仪表板组件。我想在不触及标题组件的情况下完成此操作。

以前，我写了一个函数，在保存到缓存后从缓存中删除所有与数据相关的属性，但我认为这可能不是正确的方法而且太复杂了。完成此任务的最佳方法是什么？

所以假设每个小部件都是这样的：

 {
 widgetType: chart, 
 position: someCoordinatesThatStayTheSameOnStateChange,
 chart: containsDataThatNeedsToBeRefreshed,
 chartData: containsDataThatNeedsToBeRefreshed
}

这是我的路线文件中的$resolve＆＃d; d函数，它在仪表板控制器中公开$ctrl.widgets：

widgets($http, $q, CacheFactory, WidgetsService) {
      'ngInject';
      let mockWidgetData = WidgetsService.getAllWidgets();
      let widgetsCache = CacheFactory.get('widgets');
      if (!widgetsCache) {
        CacheFactory.createCache('widgets', {
          storageMode: 'localStorage',
        });
      }
      return mockWidgetData;
    },

我将数据保存在仪表板控制器的缓存中的相关位置：

let widgetsCache = CacheFactory.get('widgets');
  let widgetsCacheItems = widgetsCache.get('widgets');

  gridsterConfig.resizable.stop = function(event, $element, widget) {
    widgetsCache.put("widgets", $ctrl.widgets);
   //clearDataFromCache()
  }
  gridsterConfig.draggable.stop = function(event, $element, widget) {
    widgetsCache.put("widgets", $ctrl.widgets);
    //clearDataFromCache()
  }
  $ctrl.toggleVisibility = function(widget) {
    widget.hidden = !widget.hidden;
    widgetsCache.put("widgets", $ctrl.widgets);
   //clearDataFromCache()
  }

我写的旧功能：

function clearDataFromCache() {
        let widgetObjectsInCache = widgetsCache.get('widgets');
        widgetObjectsInCache.forEach((widget) => {
          if (widget.chart) delete widget.chart;
          if (widget.chartConfig) delete widget.chartConfig;
        })
        console.log(widgetObjectsInCache, "THE CACHE AFTER REMOVING ANY DATA RELATED STUFF");
      }

Answer 1

您可以使用resolve函数for state来重新获取所需的数据。请检查https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c?swoff=true#.bkudisx52

如何在状态reload-angular 1.5 / ui-router上刷新缓存中的数据

1 个答案: