保存添加小部件

Question

的狀態如何保存添加的窗口小部件的狀態：下面是我使用的按鈕，點擊添加插件的功能：

$('.js-resize-random').on('click', function() { 
    gridster.add_widget('<li class="new">The new widget...</li>', 2, 1); 
}); 

下面是HTML：

<div> 
<button class="js-resize-random">Add widget</button></div> 

在刷新時我需要添加小部件以保持其狀態。我怎麼做？ 任何想法?????

提前致謝！

Answer 1

我最近爲保存和加載儀表板小部件的位置做了一個指令。這是小部件div的一個簡單屬性。

appControl.directive('saveLoadGridsterPosition', ['whateverStoringDependency', function($whateverStoringDependency) 
{ 
    return function(scope, element, attrs) { 

     var objectLoaded = whateverStoringDependency.load(attrs.saveLoadGridsterPosition); 
     // Empty or errorous load 
     if ((objectLoaded == undefined) || (objectLoaded == null)) { 
      console.log('Error loading ' + attrs.saveLoadGridsterPosition+'\'s position.'); 
     } 
     else { 
      // Here you set the row/col somewhere in the scope, for me its like scope.widget.row 
      scope.widget.row = objectLoaded.row; 
      scope.widget.col = objectLoaded.col; 
     } 

     var save = function() { 
      // Here you should get the row/col from the scope 
      var r = scope.widget.row; 
      var c = scope.widget.col; 
      var savingObject = {row: r, col: c}; 
      whateverStoringDependency.save(attrs.saveLoadGridsterPosition, savingObject); 
     } 

     scope.$on('$destroy', save); 
    } 
}]); 

'whateverStoringDependency'可以是從本地存儲，Cookie或會話保存/負載的東西的定製服務。然後我這樣使用它：

<div gridster="gridsterOpts"> 
    <ul> 
     <li ng-repeat="widget in widgets" gridster-item row="widget.row" col="widget.col" size-x="widget.sizeX" size-y="widget.sizeY"> 
      <div data-widget="widget" save-load-gridster-position="{{widget.name}}"></div> 
     </li> 
    </ul> 
</div> 

也許這不是很好，但對我來說它完美的作品。它也可以在任何角度事件上做到這一點，就像你定義"savePositions"並聽取它而不是"$destroy"。希望能幫助到你！

Answer 2

我會說如果你想永久性的改變你可能需要用Ajax做一些事情來將新的標記寫入你的數據庫。

如果它是更具體的會話特定，你可能會用cookie來解決它。

<?php 
//check for cookie value 
$widgetVar = $_COOKIE['widgetStatus']; 
?> 

<?php if($widgetVar!='true'): ?> 
$('.js-resize-random').on('click', function() { 
    gridster.add_widget('<li class="new">The new widget...</li>', 2, 1); 
    //code to set the cookie once the button is clicked 
    document.cookie = "widgetStatus=true"; 

}); 
<?php else: ?> 

    This markup renders if the cookie is true when the page loads. So this is where the widget would go. 

<?php endif; ?>