2016-05-13 96 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> 

和我的腳本

.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; 
    } 
}; 
} 
]) 

這最終爲尋找這樣enter image description here並不會觸發這是在我的plunkr所示的滾動功能。

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

任何幫助,將不勝感激

+0

檢查你的代碼,這可能有錯誤檢索數據並添加到陣列 –

+0

我已經更新了我的問題與相應的腳本。正如您所看到的,它與用於測試目的的plunkr是相同的腳本。 plunkr無論從外觀上看都不起作用。 –

+0

添加$ scope.apply()代碼結束 –

回答

1

因此,這顯然是一個奇怪的答案,因爲它真的沒有過我的腦海。因爲我有一個谷歌地圖,是完整的網頁,我用html的標籤,這是

.html{ 
height 100%; 
} 

這引起了一些錯誤,因爲它會觸發滾動的。所以我根本無法滾動。刪除高度限制允許它滾動。