2016-05-13 2 views
0

https://github.com/sroze/ngInfiniteScroll/tree/1.0.0からnginfiniteScrollを使用しようとしています。私はそれをすべて読むことができますが、私はスクロールをトリガーする際にいくつか問題があります。スクロールボックスのコンテナを作成すると、無限のスクロールがうまく動作します。しかし、私はそれをコンテナから取り出し、体を使うだけでスクロールすることはできません。私のコードの大部分を作成しましたが、それはplunkrで完全にうまくいくように見えます。本当に混乱します。ngInfiniteScrollスクロールが起動しない

私はそう

<style>#list-wrapper{ 
max-height: 400px; 
overflow-y: scroll; 

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

h4{ 
padding: 20px; 
}</style> 

<div class="panel-content" data-ng-controller="DashboardCtrl"> 

<div> 
    <div class="list" infinite-scroll='loadMore()' 
     infinite-scroll-distance='2'> 
     <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> 

<h4>{{scrollTriggered}}</h4> 
</div> 

のでenter image description hereとして見終わると、私のplunkrに示されているスクロール機能をトリガしません私のスクリプト

.controller("DashboardCtrl", ["$scope", 
function ($scope) { 

$scope.infiniteList = []; 
$scope.incr = 1; 

$scope.scrollTriggered = ""; 

$scope.loadMore = function() { 

    $scope.scrollTriggered += "\n Scroll Triggered" 
    for (var i = 0; i < 30; i++) { 
     $scope.infiniteList.push("Item " + $scope.incr); 
     $scope.incr += 1; 
    } 
}; 
} 
]) 

のようなものを持っている自分自身のコードで

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

すべてのヘルプは大幅に

+0

データを取得して配列に追加する際にエラーが発生する可能性があるコードを確認してください –

+0

私は適切なスクリプトで質問を更新しました。あなたが見ることができるように、それはテスト目的のためのplunkrと同じスクリプトです。 plunkrはそれの外見からも機能しません。 –

+0

add $ scope.apply()コードの末尾 –

答えて

1

をいただければ幸いこれは明らかだった、それは本当に私の心を越えていなかったので、奇妙な答えです。私はフルページでGoogleマップを持っているので、私はそれがすべてでスクロールをトリガーするよう

.html{ 
height 100%; 
} 

この

は多少の誤差が発生した.htmlのタグを使用していました。したがって、私は全くスクロールできませんでした。高さ制限を削除すると、スクロールが可能になりました。

関連する問題