5

让我们假设一个无限滚动显示的 1000 个项目的列表。

每个项目显示：一个人的名字、姓氏和心情。（为了简单起见）

最初，我不想收听更新。
所以伟大的angular-bindence指令甚至更好：angular 1.3 one-binding 特性成功了。

现在，我创建了一个下拉刷新组件，允许刷新整个项目。
但是，作为绑定一次（而不是重新加载页面），我的整个列表没有考虑到更新。

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

<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>

下拉刷新触发此功能：

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

问题是：

有没有办法仅在触发下拉刷新时刷新所有数据？
在这种情况下，我将能够保持这种单一绑定，这将在处理大量人员列表时大大提高性能。

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

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

4

3 回答 3

3

获取angular-bind-notifier。

使用本机绑定（使用稍微修改的语法）并像这样设置您的标记：

<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变化时 - a$broadcast将通过创建的子作用域向下发送，bind-notifier并用语法告诉每个绑定:key:expr重新评估。

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

$scope.$broadcast('$$rebind::' + key) // where 'key' === 'eventKey' in the example above.
于 2015-07-11T14:05:39.133 回答
0

与其尝试解决不使用双向绑定但仍然具有其所有优点的解决方案，不如使用更有可能和更简单的解决方案。您说有 1,000 行，是否所有 1,000 行都带有视口/用户一次可见？

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

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

这里有一些虚拟滚动/缓冲指令来看看：

https://github.com/EnzeyNet/VirtualScroll

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

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

于 2014-12-04T18:37:46.217 回答
0

refresh-on指令可以解决问题，在这里找到了参考：

<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>
于 2014-12-04T17:58:38.030 回答