角度無限滾動從抽象狀態的REST API

我正在使用angularjs進行編碼的cordova中的應用程序，並且使用infinitescroll for angular來滾動遠程API調用。角度無限滾動從抽象狀態的REST 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>

來源

2017-06-14 Shakuni_The Game_Changer

基於ngInf initeScroll documentation，有一個屬性稱爲infinite-scroll-listen-for-event

無限滾動聽換事件（可選） - {字符串} - 的的事件的名稱，在接收時，將引起滾動位置檢查到重新運行。如果您需要手動觸發滾動處理程序，這很有用，例如，如果您的項目已被過濾或修改爲而不更改集合。

所以，你可以在按鈕按下發射事件，並通過事件名稱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') 
}

來源

2017-06-14 14:08:24 MarkoCen

您好我試過，但沒有任何結果:(一兩件事，我今天發現我正在渲染視圖抽象的頁面，即，我是抽象的視圖泡吧......它可以很好地處理沒有抽象視圖的單頁 –

角度無限滾動從抽象狀態的REST API

回答

相關問題