web-dev-qa-db-ja.com

ngInfiniteScrollが機能しない

NgInfiniteScrollを機能させようとしていますが、無駄です Plunker 。スクロールイベントはページの読み込み時にのみトリガーされ、その後は何もトリガーされないようです。誰かが光を当ててくれませんか。

私はさまざまな組み合わせを試しましたが、どれもうまくいきませんでした：

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

}]);
javascriptangularjsinfinite-scrollnginfinitescroll
9
Shyamal Parikh

編集：-containerメソッドと-parentメソッドを持たない最新の安定バージョンのngInfinite Scrollを使用しています。プランカーを開発ngInfiniteScroll.jsで更新しました。これで、動作するコードをここで確認できます。

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

古い：

ngInfiniteScrollは、要素の下部がブラウザウィンドウの下部に近づくたびに、myPagingFunction（）を呼び出します。

したがって、cssを変更し、max-heightを削除して、リストがページをカバーするようにすると、ユーザーがページを超えてスクロールしたときにinfinitescrollが機能していることがわかります。

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

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

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

参照： コンテナ内のangularjs無限スクロール

8
gaurav5430

MAINHTMLまたは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'">

これは私の日を救った。

4
Mahendra

「infinite-scroll-parent」のチェックを実行する1.3.0バージョンをチェックアウトできます。

Bowerを使用している場合：bower install --save ngInfiniteScroll＃1.3.

<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">
2
tottomotto