UI-网格saveState服务循环逻辑

Question

以下是问题的摘要:我设置了一个列sortChange()侦听器，它通过触发一个查询来获取新排序的数据来响应排序更改。我在获取之前保存网格状态，并在获取之后恢复网格状态。问题在于，还原gridState机制会触发原始的排序侦听器，导致整个过程一次又一次地重新开始。

scope.sitesGrid.onRegisterApi = function(gridApi) {
  scope.gridApi = gridApi;

  scope.gridApi.core.on.sortChanged(scope, function () {
    // load new sites on a sort change
    scope.initialize();
  });
};

scope.initialize = function() {
  // save current grid state
  scope.gridApi && (scope.gridState = scope.gridApi.saveState.save());

  fetchSites().then(function (sites) {
    scope.sitesGrid.data = sites
    // restore current grid state, but inadvertently retrigger the 'sortChanged' listener
    scope.gridApi.saveState.restore(scope,scope.gridState);
  })
};

我在想，我可以在每个列标题上设置一个单击侦听器，而不是使用sortChange侦听器，但是这个解决方案看起来很丑陋，并且需要进入每个标题单元格模板并进行更改。

Answer 1

使用某种作用域变量来跟踪数据加载情况如何？

scope.gridApi.core.on.sortChanged(scope, function () {
    if (!scope.isLoading) {
        scope.initialize();
    }
});

和

fetchSites().then(function (sites) {
    scope.isLoading = true;
    scope.sitesGrid.data = sites;
    scope.gridApi.saveState.restore(scope,scope.gridState);
    scope.isLoading = false;
})

如果存在计时问题，您可能需要在某些地方添加一些timeout()调用。在这种情况下，创建一个柱塞来演示这一点会很有帮助。

Answer 2

我想我找到解决方案了。我在我的指令中创建了恢复函数(你可以在你想用的地方使用它)。我只是阻止执行下一次迭代，直到动作结束。

function restoreState() {
    if ($scope.gridState.columns !== undefined && !isRestoring) {  //check is any state exists and is restored
        isRestoring = true;  //set flag
             $scope.gridApi.saveState.restore($scope, $scope.gridState)
                  .then(function () {
                       isRestoring = false;  //after execute release flag
                   });
    }

}

function saveState() {
    if (!isRestoring) {
        $scope.gridState = $scope.gridApi.saveState.save();
    }
}