Question

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

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

示例：我必须输入 searchtext ，我应该通过API传递它以获取详细信息。

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

下面的代码片段是我为抽象视图编写的代码。的 app.js

＆＃13;

.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"
         })

＆＃13;

目前，我可以获取列表并使用以下$ urlRouterProvider进行滚动。的 $ urlRouterProvider.otherwise（＆＃34; / networkDetail＆＃34）

但是当我尝试同样的时候的 $ urlRouterProvider.otherwise（＆＃34; / sidemenu / networkDetail＆＃34）

只会显示前5个元素并加载下5个数据，而不是从移动端滚动。

我用于滚动的功能是：

＆＃13;

   $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();
}

＆＃13;

和html部分是..

＆＃13;

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

＆＃13;

Answer 1

基于ngInfiniteScroll documentation，有一个名为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')
}

角度无限滚动来自REST API的抽象状态

1 个答案: