無限滾動沒有在溫泉列表中工作angularjs

Question

我正在在angularjs對於無限滾動演示，我是新來angularjs。我正在使用gonsen ui進行演示，並且想要爲我的應用程序實現無限滾動功能。它的工作完全使用普通<ul>和<li>元素，但是當我使用無限滾動停止工作，我不知道爲什麼它不工作有什麼錯我的代碼。

HTML

<ons-page data-ng-controller='Listingcontroller'> 
    <ons-toolbar style="background: #da1e3e;" fixed-style> 
    <div class="left"> 
     <ons-back-button onclick = "hide()">Back</ons-back-button> 
    </div> 
     <div class="center" >Listing</div> 
    <div class="right" style="position: relative;"> 
    <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="gallery.pushPage('filter.html',{params:'+{{filteid}}'});" style="border: none; padding: 0 0 4px 0;"> 
     <i class="ion-android-options" style="font-size:24px; color: #FFFFFF;"></i> 
    </span> 

    <span class="toolbar-button--quiet navigation-bar__line-height" style="padding: 0;"> 
     <i class="ion-android-more-vertical" role="menu" style="font-size: 26px; margin: 0; padding: 0 12px;" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" dropdown-disabled="dropdownsDisabled"></i>   
    </span> 
    </div> 
</ons-toolbar> 
    <div> 
    <ons-list class="list ons-list-inner list--categories" when-scrolled='more()'> 
     <ons-list-item data-ng-repeat="item in items" modifier="chevron" ng-model="vm.catid" class="list-item-container" ng-click="gallery.pushPage('detail-page.html',{params:'+{{catid}}'});"> 
     {{item.title}} 
     <img src={{item.img}} class="thumbnail" style = "width: 100px;height:100px"> 
     <div class="rating"> 
       <i class="ion-android-star" style="color: #ffb400;"></i> 
       <i class="ion-android-star" style="color: #ffb400;"></i> 
       <i class="ion-android-star" style="color: #ffb400;"></i> 
       <i class="ion-android-star" style="color: #ffb400;"></i>     
       <i class="ion-android-star"></i> 
       </div> 
     </ons-list-item> 
    </ons-list> 
    <div data-ng-show='loading'>Loading</div> 
    </div> 

    </div> 
    </div> 

</ons-page> 

JS

var app= angular.module('app',['onsen','angular-images-loaded','ngMap','angular-carousel','ngDropdowns']); 
    app.controller("Listingcontroller", function($scope, $http){ 
     var vm=this; 
      var Start = '0'; 
      var Pagesize = '10'; 
      var SearchTxt = ''; 
      var FilterTxt = ''; 
      var FilterStarSearch = ''; 
      var FilterPriceSearch = ''; 
      var FilterLocationSearch = ''; 
      var FilterCuisineSearch = ''; 
      var FilterCategorySearch = ''; 
      var FkCategory ='1'; 
      //var title = page.options.params2; 

     // the array which represents the list 
     $scope.items = []; 
     $scope.loading = true; 

     // this function fetches a random text and adds it to array 
     $scope.more = function(){ 
     $http({ 

       method: 'POST', 
       url: API_HOST+'/webservice/listinglist', 
       headers: { 
        'Content-Type': 'application/x-www-form-urlencoded', 
        'caymanauth': caymanauth 
       }, 
             data: "&Start="+cnt+"&Pagesize="+Pagesize+"&SearchTxt="+SearchTxt+"&FilterTxt="+''+"&FilterStarSearch="+FilterStarSearch+"&FilterPriceSearch="+FilterPriceSearch+"&FilterLocationSearch="+FilterLocationSearch+"&FilterCuisineSearch="+FilterCuisineSearch+"&FilterCategorySearch="+FilterCategorySearch+"&FkCategory="+FkCategory 


      }).success(function(data, status, header, config){ 
       cnt += 10; 
    var i; 

     for (i = 0 ; i< data['Details'].length ; i++) 
       { 

        console.log("==========rating========="+rating); 

        var newItem = data['Details'][i]['varTitle']; 
        var img = API_HOST+'/cache/business/images/337_224/'+data['Details'][i]['varCompanyLogo']; 
        var rating =data['Details'][i]['review']; 
        var desc = data['Details'][i]['varDescBusiness']; 
        var loc = data['Details'][i]['location']; 
        var id = data['Details'][i]['intGlCode'] ; 


        $scope.items.push({title:newItem},{id:id},{img:img},{rate:rating},{desc:desc},{loc:loc}); 

       } 
      $scope.loading = false; 

     }); 
     }; 

     // we call the function twice to populate the list 
     $scope.more(); 

    vm.submit = function(list){ 

      gcat = list.id; 

      gallery.pushPage("list-page.html",{params:gcat}); 
      // gallery.pushPage("detail-page.html",{params:Cat_Id}); 

     }; 
    });'' 

Answer 1

它看起來像你使用角whenScrolled但不包括在你的應用程序模塊。

添加依賴於你的應用程序如下：

var app = angular.module('app', 
    ['onsen','angular-images-loaded','ngMap','angular-carousel','ngDropdowns', 'angular-whenScrolled']); 

顯然的JavaScript文件需要被包含在頁面也是如此。

See the angular-whenScrolled documentation