角度無限スクロール抽象的な状態のREST APIから

Question

私はコーディングにangularjsを使用してcordovaのアプリケーションに取り組んでおり、スクロールリモートAPI呼び出しにはinfinitescroll for angularを使用しました。

今私の質問は、ボタンのクリックイベントでこのプラグインを使用する方法です。

例：searchtextと入力する必要があります。詳細を知るには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

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') 
}