將角度柵格保存在本地存儲中

Question

我想在本地存儲中以及之后在數據庫中保存角度柵格（每個項目的位置，大小和順序），並在頁面加載時檢索存儲的位置。 我已經找到了一些適用於gridster的東西https://github.com/ducksboard/gridster.js/issues/111，但是對於有角度的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>

Answer 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()
} 

注入服務的方法有很多，但這只是我完成它的方式。 祝你好運，希望這會有幫助！