具有 ng-show 和粘性状态的 ng-infinite-scroll答案

【问题标题】：ng-infinite-scroll with ng-show and sticky states具有 ng-show 和粘性状态的 ng-infinite-scroll
【发布时间】：2017-04-10 15:04:22
【问题描述】：

我是 Angular 的新手。在我的单页 Web 应用程序中，我有两个选项卡，每个选项卡都带有 ng-infinite-scroll。使用导航栏在两个选项卡之间遍历，

    <div ng-show="$state.includes('base.videolist')||$state.includes('base.movielist')  ">
<ul class="nav navbar-fixed-top roboto nav-tabs">
   <li ui-sref="base.videolist" ui-sref-active="active"><a>Videos</a></li>
   <li ui-sref="base.movielist" ui-sref-active="active"><a>Movies</a></li>
</ul>
</div>

每个选项卡位于两个 ui 视图中，如下所示。

<div id="bvl" ui-view="videolist" ng-show="$state.includes('base.videolist')"></div>
<div id="bml" ui-view="movielist" ng-show="$state.includes('base.movielist')"></div>

使用 ng-show 时，隐藏 div 的高度通过 angular 设置为 0。从而无限地触发无限滚动。

我不想使用 ng-if，因为我想保持列表的滚动状态。

如何处理？

PS。我对两个列表都使用粘性状态来维护列表元素的主详细信息视图之间的状态。

【问题讨论】：

或许使用ng-class？
有什么问题？
@Ladmerc 我不知道如何让两个滚动条都工作。
这里的文档github.com/sroze/ngInfiniteScroll 说你应该定义<div infinite-scroll="$ctrl.myPagingFunction()" infinite-scroll-distance="3"></div>；假设您在控制器中定义了myPagingFunction
@Ladmerc 函数已正确触发。问题在于触发的时机。触发器被触发多次，因为 ng-show 导致一个 div 的高度设置为 0

标签： angularjs angular-ui-router infinite-scroll ng-show nginfinitescroll

【解决方案1】：

来自https://sroze.github.io/ngInfiniteScroll/documentation.html

infinite-scroll-disabled (optional) - {boolean} - 一个布尔表达式，如果为真，则表示即使满足所有其他条件也不应评估无限滚动表达式。

如果您想使用 ng-show="showIt" 隐藏包含无限滚动的元素，您可以添加 infinite-scroll-disabled="!showIt" 以阻止它在隐藏时尝试加载更多项目。

这是一个jsbin example，带有 2 个无限滚动 div，每个 div 都可以用 ng-show 隐藏，而隐藏的无限滚动不会在每次滚动时尝试加载更多项目。

【讨论】：

每个div在切换时如何保持滚动状态？