我最近为保存和加载仪表板小部件的位置做了一个指令。这是小部件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"
。希望能帮助到你!
我需要获取我添加的widget来获取'widgetStatus'的id?如果是这样,我该怎么做?也FYI:我正在使用jquery-gridster。 – user2942566
这听起来像你说的,可能有不同的小部件,所以你需要代码来检测哪些存在?也许那么'widgetStatus'应该是逗号描述的ID字符串而不是简单的布尔值?你可以将字符串解析成数组并通过PHP或JS进行检查。 – Ecksley