Question

我试图通过更改API网址来让我的主页加载更多项目。当用户向下滚动到页面底部时，索引必须增加。这是我的主页JS文件Haberler.js：

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

  }]);

这是.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上都很新，我无法找到原因。感谢。

Answer 1

infinte-scroll指令正在寻找要调用的作用域的loadmore函数。

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

但是控制器中的范围没有定义这样的功能。

尝试在控制器中定义这样的函数：

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

滚动时会触发此方法。

无限滚动代码在我的Angular项目中不起作用

1 个答案: