2015-11-30 5 views
6

私はngInfiniteScrollを動作させようとしていますが、無駄にしています - Plunker。スクロール・イベントは、ページ・ロード時にのみトリガーされ、その後は何もトリガーされないようです。誰でも光を放つことができますか?ngInfiniteScrollが機能しない

私は何も働いていない、様々な組み合わせを試してみました:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent 

infinite-scroll='loadMore()' infinite-scroll-distance='2' 

HTML:

<body ng-app="app" ng-controller="listController"> 
     <div id="list-wrapper"> 
      <div class="list" infinite-scroll='loadMore()' 
     infinite-scroll-distance='2' 
     infinite-scroll-container="'#list-wrapper'"> 
      <div class="header"> 

      </div> 

      <div class="list-table" > 
       <table class="table"> 
        <tbody> 
         <tr ng-repeat="item in infiniteList"> 
          <td style="width:100%"> 
           <div>{{item}}</div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div style='clear: both;'></div> 
      </div> 
     </div> 

JS:

var app = angular.module("app", ['infinite-scroll']); 

app.controller('listController', ['$scope','$http', function ($scope,$http) { 
    $scope.infiniteList = []; 
    $scope.incr = 1; 

    $scope.loadMore = function(){ 
     console.log("scroll"); 
     for(var i = 0; i< 30; i++){ 
      $scope.infiniteList.push("Item " + $scope.incr); 
      $scope.incr +=1; 
     } 
    }; 

}]); 

答えて

8

EDIT:あなたは最新の安定版を使用しているがngInfinite Scの

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

OLD:

-containerと-parentメソッドを持っていないロール、私はdevelpomentのngInfiniteScroll.jsとplunkerを更新してい、今、あなたはここで作業コードを見ることができますあなたは、CSSとremovを変更した場合

ngInfiniteScrollは、myPagingFunction() 要素の底が

ので、ブラウザウィンドウの下部に近づく任意の時間を呼び出しますeの最大高さは、リストがページをカバーするため、ユーザーがページをスクロールしたときに無限小文字が動作していることがわかります。また

#list-wrapper{ 
    //max-height: 400px; 
    overflow-y: scroll; 

    margin-top: 20px; 
    border: solid 1px black; 
} 

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

参照:angularjs infinite scroll in a container

+0

をインストールし、私はこの問題でいくつかのトラブルがあったが、私もバージョン番号を確認しませんでした私はnugetからjsファイルを入手したので、彼らは最新のバージョンだと思っていましたが、2013年からでした。最新のコードでファイルの内容を変更し、あなたの例で変更したように問題を修正しました – bokkie

3

はあなたのMAIN HTMLやbodyタグを確認してください。彼らはいくつかのオーバーフローCSSを含んでいるかもしれません。その場合、ページスクロールはラッパーでなければなりません。

body { 
height: 100%; 
overflow-y: auto; 
overflow-x: hidden; 
} 

<div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy' 
    infinite-scroll-distance='0' 
    infinite-scroll-container="'body'"> 

これが私の一日保存しました。

1

あなたは「無限スクロール - 親」のチェックを行い、1.3.0バージョンをチェックアウトすることができます。

あなたは亭を使用している場合:バウアーは--save ngInfiniteScrollの#1.3.0

<div class="scroll-container"> <!-- Fixed height is OK --> 
    <div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true"> 

+0

私の日を救った! – walox

関連する問題