在本地存储中保存角度网格答案

【问题标题】：Save angular gridster in local storage在本地存储中保存角度网格
【发布时间】：2016-06-06 14:27:22
【问题描述】：

我想将 angular gridster（每个项目的位置、大小和顺序）保存在本地存储中，然后在数据库中保存，并在页面加载时检索存储的位置。我找到了 gridster https://github.com/ducksboard/gridster.js/issues/111 的东西，但没有找到 angular gridster。请问可以帮帮我吗？谢谢

 vm.gridsterOptions = {
    columns: 4,
    mobileModeEnabled: true,
    draggable: {
      enabled: true, // whether dragging items is supported
      handle: '.H', // optional selector for drag handle
      stop: function(event, $element, widget) {         

      }
    },
    resizable: {
      enabled: true,
      stop: function (e, ui, $widget) {          

      },
      handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],


    },
  };

这是我的 HTML

 <div gridster="test.gridsterOptions" class="gridster-ready">
        <li class="my-class" gridster-item ng-repeat="datas in     test.chartDataArray "  >

             <highchart  id="container" style="width:100%;height:88%;margin: 0 auto" config="datas" ></highchart>

        </li>
  </div>

【问题讨论】：

标签： javascript angularjs gridster

【解决方案1】：

解决此问题的最佳方法是创建一个服务，该服务的功能是从本地存储中保存和检索小部件数据。将此服务注入您的仪表板控制器，您应该能够在本地保存小部件数据。下面是一个将保存到本地存储的“widgetmanager”服务示例：

angular.module('app')
    .service('WidgetsManager', widgetsManagerService);

    function widgetsManagerService() {
        return {
        getWidgets: function () {
            return angular.fromJson(localStorage.getItem('widgets')) || [];
        },
        setWidgets: function (widgets) {
            return localStorage.setItem('widgets', angular.toJson(widgets));
        },
        clearWidgets: function () {
            return localStorage.removeItem('widgets');
        },
    };
}

如果您的应用模块被称为“app”并且您可以像这样注入服务，这将起作用：

angular.module('app').controller('DashboardController', 
['WidgetsManager', dshaboardContoller]);

function dashboardController(WidgetsManager){
    //whatever code. accessing widget manager functions would be preceded by the
    //WidgetManager service like so

    var widgets = WidgetsManager.getWidgets()
}

有很多方法可以注入服务，但这就是我所做的。祝你好运，希望这会有所帮助！

【讨论】：