Angular ui-grid : 为每个数据单元格渲染调用在数据网格 header 内注入的方法

Question

在数据网格 header 中注入的方法会在每个数据单元格渲染时被调用，并且在我们进行水平或垂直滚动时也会被调用。为了重现这个问题，我在此处附上了 plnkr link。 http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview , http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview (<div class="ui-grid-top-panel" style="text-align: center">{{grid.appScope.letter()}}</div> ，尝试排序，水平或垂直滚动）。

例如：下面是header单元格视图模板，我们有injected {{ grid.appScope.getHeaderLetter( col.name, $parent.$index )}}当我们进行水平或垂直滚动或初始单元格渲染时getHeader字母方法正在为每个数据单元调用。换句话说，如果我们有 100000 个单元格，那么方法将被调用 100000 次。我想我在用例方面遗漏了一些重要的事实。非常感谢您对此发表评论。

----Header定义----

<div class="ui-grid-top-panel ui-grid-top-panel-single" id="{{'ui-grid-index-' + col.name  }}" style="text-align: center">
  <div class="ui-grid-alphbet ui-grid-alphbet-first">{{ grid.appScope.getHeaderLetter( col.name, $parent.$index ) }}
  </div>
     .
     .
     .
     more code

我在这里问过同样的问题...https://github.com/angular-ui/ui-grid/issues/4250，但没有得到任何答复。

Answer 1

这就是 angular 脏检查的工作方式。你无能为力。只是尽量不要在这些函数中放置 long-运行操作。

这个怎么样：

  $scope.letterFn = function () {
    console.log("CHANGE LETTER")
    return i;
  }

  $scope.letter = $scope.letterFn();

http://plnkr.co/edit/yF1sSG2QXeO9cFNAeDYm?p=preview

Angular ui-grid : 为每个数据单元格渲染调用在数据网格 header 内注入的方法

Angular ui-grid : Method injected inside header of data grid is being called for each data cell rendering

javascript

angularjs

angular-ui-grid