Angularプロジェクトで無限のスクロールコードが機能しない

APIのURLを変更してホームページをロードしようとしています。ユーザーがページの一番下にスクロールすると、インデックスが増加する必要があります。Angularプロジェクトで無限のスクロールコードが機能しない

angular.module('home', ['infinite-scroll']) 
.controller('anasayfa', ['$scope', '$http', 
    function ($scope, $http) { 

     $scope.method = 'GET'; 

    $scope.loadMore = function() { 
     if (this.busy) return; 
      this.busy = true; 
      $http.jsonp($scope.url).success(function (index) { 
       for (var index = 0; index < 8; index++) { 
        $scope.url = 'http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=' + index + '&pageSize=15'; 
       } 
       this.busy = false; 
      }.bind(this)); 

    } 

     $scope.code = null; 
     $scope.response = null; 

     $http({ method: $scope.method, url: $scope.url }). 
     then(function (response) { 
      $scope.status = response.status; 
      $scope.data = response.data.Data; 
     }, function (response) { 
      $scope.data = response.data || "Request failed"; 
      $scope.status = response.status; 
     }); 

    }]);

Thが.cshtml

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 
<html ng-app="home"> 
<head> 
    <meta charset="utf-8" /> 

    <title>Home</title> 
</head> 

<body ng-controller="anasayfa"> 
    <div infinite-scroll="loadMore()" infinite-scroll-distance="1"> 
     <div ng-repeat="d in data"> 
      <div> 
      <p >{{d.Title}}</p> 
      <a href="/detay{{d.Url}}"><img class="image" src="{{d.Image}}" /></a> 
     </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script type="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.min.js"></script> 

    <script src="/Scripts/Haberler.js"></script> 
</body> 
</html>

である。しかし、それは動作しませんし、私は非常に新しいですので、JavaScriptとAngularJSで、私は理由を見つけることができません：これは私のホームページのJSファイルHaberler.jsです。ありがとう。

出典

2016-06-23 hbc

infinte-scrollディレクティブは、呼び出すスコープ上のloadmore関数を探しています。

<div infinite-scroll="loadMore()" infinite-scroll-distance="1">

しかし、このような機能はコントローラのスコープに定義されていません。

は、あなたのコントローラでは、このような関数を定義してください：あなたがスクロールするとき

$scope.loadMore = function(){ 
    alert('infinte scroll method called'); 
}

このメソッドは、起動します。

出典

2016-06-23 09:35:27

最後に、loadMore：function（response）で始まる関数を削除し、あなたが言ったようにseparetelyを追加しました。しかし、私のホームページには何も表示されません。ただの空白のページです。元の質問を編集して、私が試したことを示す。エラー： 'angular.min.js：117エラー：[$ http：badreq]' – hbc

あなたの現在のコードを保持することができます。 $ scope.loadmoreとしてもう1つの機能を追加して、スクロールが機能しているかどうか試してみてください。 –

私はそのページを開いたときに警告を表示し、ページの一番下に行くと警告が2回表示されます。しかし、それ以外の変更はありません。それ以上の画像はロードされません。 – hbc

Angularプロジェクトで無限のスクロールコードが機能しない

答えて

関連する問題