Question

我正在使用UI-Grid（http://ui-grid.info/docs/）角度插件来显示数据，但注意到一些我无法解决或发现任何问题的怪癖。

我有一个包含一些参数的搜索表单，我点击搜索然后查询数据库并返回放入此网格的结果。我进行搜索，查看数据/滚动等，然后进行另一次搜索。擦除网格中的数据并输入新数据。（即使用相同的网格） - 从中我注意到2个问题：

1）当我执行第二次数据库搜索时，滚动位置不会重置到顶部 - 并且不使用新指令（cellNav）来滚动，我不知道如何。

2）与此类似，当您进行新搜索时，无限滚动似乎停止工作。

要解决这两个问题，我原本以为我需要简单地刷新网格...但我找不到如何。有什么建议吗？

Answer 1

好的，我找到了解决方案......

我每次都会重新创建DOM元素。首先，我删除元素 - 确保销毁隔离范围以避免指令观察者零点异常。

if(document.getElementById('searchGrid')) {
    $scope.element = angular.element(document.getElementById('searchGrid'));
    var isolate = $scope.element.isolateScope();
    isolate.$destroy();
    if($scope.element) $scope.element.remove();
  }

接下来，创建你的元素并使用$ compile将其转换为angular元素并创建指令等：

  var newDirective = angular.element('<div id="searchGrid" ui-grid=\"gridOptions\" ui-grid-infinite-scroll ui-grid-auto-resize ui-grid-move-columns ui-grid-resize-column ng-style=\"{ \'height\' : height }\" ng-show=\"gridLoaded &amp;&amp; !gridLoading\"></div>');
  var element = angular.element(document.getElementById('myGrid'));
  element.append(newDirective);
  $compile(newDirective)($scope);

注意myGrid只是一个空div，所以我可以将searchGrid div添加到。

似乎不是最优雅的解决方案 - 肯定会有UI-GRID（或者至少应该是）清除网格以允许它被重用。但它仍然有效。

Angular UI-Grid重用网格不重置滚动+无限滚动不起作用

1 个答案: