在抽象状态下从REST API无限角度滚动

Question

我正在cordova中使用angularjs进行编码的应用程序，并使用infinitescroll为angular用于滚动远程API调用的应用程序。

现在我的问题是我如何在按钮事件中使用此插件。

示例：我必须键入一个搜索文本，并且应该通过API传递它以获取详细信息。

在再次到达第10个元素之后，我必须获取数组中的前10个元素，我应该调用API以获得更多结果。

片段下方是到目前为止我为抽象视图编写的代码。 app.js

 .state("sidemenu", { url: "/sidemenu", abstract: true, templateUrl: "app/templates/view-SideMenu.html", controller: "sidemenuCtrl" }) .state("sidemenu.networkDetail", { url: "/networkDetail", templateUrl: "app/templates/view-networkDetail.html", controller: "networkDetailCtrl" }) 

目前，我能够获取列表并使用以下$ urlRouterProvider进行滚动。 $ urlRouterProvider.otherwise（ “/ networkDetail”）

但是当我用$ urlRouterProvider.otherwise（“ / sidemenu / networkDetail”）尝试相同时

仅会出现前5个元素，并且要加载下5个数据，它不是从移动端滚动的。

我用于滚动的功能是：

  $scope.searchText = ''; var requestScrollData =function() { this.items= [], this.busy=false } var ArraySize = { size: 0, total: '' } var getRequestData = function (index) { if ($scope.searchText === "") { console.log("Please input some text..."); } else { return { method: 'POST', url: searchURL, headers: { 'Authorization': 'Bearer ' + $localstorage.get('access_token', '{}'), 'Content-Type': 'application/json' }, data: { "start": index.toString(), "length": "5" } } } }; requestScrollData.prototype.nextPage = function () { if (this.busy) return; this.busy = true; if (ArraySize.total === this.items.length) { console.log('no more items to load'); ArraySize.size = this.items.length; return requestScrollData; } else { $http(getRequestData(ArraySize.size)).then(function (responseData) { ArraySize.total = responseData.data.total; var items = responseData.data.data; for (var i = 0; i < items.length; i++) { this.items.push(items[i]); } ArraySize.size =this.items.length; this.busy = false; }.bind(this)); return requestScrollData; } }; $scope.getData = function () { $scope.scrolling = new requestScrollData(); $scope.scrolling.nextPage(); } 

和html部分是..

  <div infinite-scroll='scrolling.nextPage()' infinite-scroll-disabled='scrolling.busy' infinite-scroll-distance='0'> <div ng-repeat="item in scrolling.items track by $index"> {{item}} </div> <div ng-show='scrolling.busy'><h4 style="color:darkgray;text-align:center"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i>&nbsp;Loading data...</h4></div> </div> 

Answer 1

根据ngInfiniteScroll 文档 ，有一个名为infinite-scroll-listen-for-event的属性

无限滚动事件监听 （可选）-{string}-事件的名称，当接收到该事件时，它将导致重新运行滚动位置检查。 如果您需要手动触发滚动处理程序（例如，在不更改集合的情况下过滤或修改了您的项目），这将很有用。

因此，您可以在单击按钮时发出一个事件，并将事件名称传递给infinite-scroll-listen-for-event

<div infinite-scroll='scrolling.nextPage()' 
     infinite-scroll-listen-for-event='RERUN_INFINITE_SCROLL'>
</div>

<button ng-click="btnClick()"></button>

//in controller
$scope.btnClick = function(){
    $scope.$emit('RERUN_INFINITE_SCROLL')
}