Question

假设有一个包含无限滚动的1000个项目的列表。

每个项目显示：一个人的firstName，lastName和心情。（为了简单起见）

最初，我不想听取更新所以伟大的angular-bindonce指令甚至更好：角度1.3单绑定功能成为了诀窍。

现在，我创建了一个pull-to-refresh组件，允许刷新整个项目但是，由于绑定一次，（并没有重新加载页面）我的整个列表没有考虑更新。

使用angular-bindonce，我目前有这个：

<div bindonce ng-repeat="person in persons track by person.id">
  <span bo-text="person.firstName"></span>
  <span bo-text="person.lastName"></span>
  <span bo-text="person.currentMood"></span>
</div>

pull-to-refresh触发此功能：

$scope.refresh() {
    Persons.getList(function(response)) {
      $scope.persons = response.data;  //data being an array
    }
}

问题是：

是否有办法在触发刷新时刷新所有数据？
在这种情况下，我将能够保持这种一键式绑定，这将大大提高处理庞大的人员列表时的性能。

到现在为止，我被迫......使用双向绑定，这是Angular的自然方式。

更一般地说，如何处理具有无限滚动的巨大列表，只有在触发某些事件时才需要更新？

Answer 1

获取componentWillLeave。

使用本机绑定（稍微修改一下语法）并设置标记，如下所示：

<div ng-repeat="person in persons track by person.id" bind-notifier="{ eventKey:watchedExpression }">
  <span>{{:eventKey:person.firstName}}</span>
  <span>{{:eventKey:person.lastName}}</span>
  <!-- or with ng-bind if you prefer that -->
  <span ng-bind=":eventKey:person.currentMood"></span>
</div>

现在，每当watchedExpression的值发生变化时，$broadcast将通过bind-notifier创建的子视图向下发送，并告诉每个具有:key:expr语法的绑定-评估。

如果需要，您还可以按以下格式手动发送$broadcast：

$scope.$broadcast('$$rebind::' + key) // where 'key' === 'eventKey' in the example above.

Answer 2

refresh-on指令可以做到这一点，找到了引用HERE：

<div bindonce="persons" refresh-on="'refresh'" ng-repeat="person in persons track by person.id">
  <span bo-text="person.firstName"></span>
  <span bo-text="person.lastName"></span>
  <span bo-text="person.currentMood"></span>
</div>

Answer 3

不是试图不使用双向绑定而是仍然具有其所有好处，而是更容易和更容易的解决方案。你说有1000行，所有1000行都有视口/一次对用户可见？

我会假设没有，所以我建议使用缓冲视图作为项目列表。缓冲行意味着不可见的行没有绑定但仍占用DOM中的空间，因此滚动条始终准确。

缓冲的一个主要警告是所有行应该是相同的高度，没有可变高度行。

以下是一些虚拟滚动/缓冲指令：

https://github.com/EnzeyNet/VirtualScroll

https://github.com/stackfull/angular-virtual-scroll

https://github.com/kamilkp/angular-vs-repeat

绑定一次但允许刷新整个项目的有效方法

3 个答案: