Infinite Scroll-Codes funktioniert nicht in meinem Angular-Projekt

Ich versuche, meine Homepage laden mehr Artikel durch Ändern der API-URL. Der Index muss sich erhöhen, wenn der Benutzer bis zum Ende der Seite scrollt. Das ist meine Homepage der JS-Datei Haberler.js:Infinite Scroll-Codes funktioniert nicht in meinem Angular-Projekt

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 die .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>

Aber es funktioniert nicht, und da ich bin sehr neu in JavaScript und AngularJS Ich kann nicht herausfinden, warum . Vielen Dank.

Quelle

2016-06-23 hbc

Die Infinet-Scroll-Direktive sucht nach einer loadmore Funktion auf dem zu rufenden Bereich.

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

Es ist jedoch keine solche Funktion für das Oszilloskop in Ihrem Controller definiert.

Versuchen Sie, eine Funktion wie diese in Ihrem Controller zu definieren:

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

Diese Methode wird ausgelöst, wenn Sie bewegen wird.

Quelle

2016-06-23 09:35:27

Ich löschte die Funktion am Ende, die als loadMore: function (response) beginnt und fügte es separat hinzu, wie Sie sagten. Aber jetzt zeigt meine Homepage nichts, nur eine leere Seite. Ich habe die ursprüngliche Frage bearbeitet, um Ihnen zu zeigen, was ich versucht habe. Fehler ist 'angular.min.js: 117 Fehler: [$ http: badreq]' – hbc

Sie können Ihren aktuellen Code behalten. Fügen Sie einfach eine weitere Funktion als $ scope.loadmore hinzu und versuchen Sie, ob der Infinet-Scroll funktioniert oder nicht –

Ich habe versucht, wenn ich die Seite öffne, warne ich, und auch wenn ich unten auf der Seite gehe, warne ich zweimal. Aber nichts anderes ändert sich, es lädt nicht mehr Bilder – hbc

Infinite Scroll-Codes funktioniert nicht in meinem Angular-Projekt

Antwort

Verwandte Themen