AngularJS无限滚动不加载

Question

这是我的例子，无限滚动不起作用。我看不出问题出在哪里。

有什么解决办法吗？

angular.module('infiniteScrollTutorial', ['infinite-scroll'])
.controller('infiniteScrollController', function ($scope, $http) {
  $scope.users =
    [{
      "id": 1,
      "first_name": "Kimberly",
      "last_name": "Grant",
      "email": "kgrant0@ebay.co.uk",
      "country": "Bolivia",
      "ip_address": "93.77.148.179"
    }, {
      "id": 2,
      "first_name": "Elizabeth",
      "last_name": "Lewis",
      "email": "elewis1@so-net.ne.jp",
      "country": "Indonesia",
      "ip_address": "39.187.159.25"
    },
     {
       "id": 3,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 4,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 5,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 6,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 7,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 8,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 9,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 10,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 11,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 12,
       "first_name": "Shawn",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
     ,
     {
       "id": 13,
       "first_name": "111111111111111111",
       "last_name": "Ellis",
       "email": "sellis2r@diigo.com",
       "country": "Portugal",
       "ip_address": "121.250.152.235"
     }
    ];
  $scope.data = $scope.users.slice(0, 3);
  $scope.getMoreData = function () {
    $scope.data = $scope.users.slice(0, $scope.data.length + 2);
  }

});

.userContainer {
  width: 500px;
  height: 410px;
  background: #f9f9f9;
  padding: 5px;
  font-family: verdana;
  margin-bottom: 7px;
  box-shadow: 0px 0px 2px 1px;
}

.userContainer p {
  font-size: 12px;
}

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.1/ng-infinite-scroll.min.js"></script>
<div ng-app="infiniteScrollTutorial" ng-controller="infiniteScrollController">
  <div infinite-scroll="getMoreData()">
    <div ng-repeat="user in data" class="userContainer">
      <h4>{{user.first_name}} {{user.last_name}}</h4>
      <p>
        <b>Email:</b> {{user.email}}  -   
        <b>Country:</b> {{user.country}}  -  
        <b>IP:</b> {{user.ip_address}} 
      </p>
    </div>
  </div>
</div>

Answer 1

改变这个：

<div ng-repeat="user in users" class="userContainer">