Question

我已经尝试按照this问题中的说明操作，但是我被卡住了，所以我不得不将此问作为一个新问题。

我正在尝试创建无限滚动，用户可以看到他的活动。这里只会显示10个（10个是假设的数字）活动，因此性能会更好。

我在后端创建了一个简单的分页，它按预期工作。

/feed/1 -> displays first 10 results (0-10)
/feed/2 -> displays 10 more (10-20)
/feed/3 -> displays 10 more (20-30)

由于我使用$http，我找不到模仿它的方法，所以我现在把它放在这里。这里可能有不止一个问题，但我尽量小心。

这是我的插件：http://plnkr.co/edit/DLAMy56jwyeqYdN1kvT3?p=preview

这是我的代码。

的index.html

<!doctype html>
<html lang="en" ng-app="feed">

<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <meta charset="UTF-8">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
      <div ui-view></div>
      <!-- Everything is in template.html -->
</body>

</html>

template.html

<div class="virtualRepeatdemoInfiniteScroll">
  <md-content layout="column">
    <md-virtual-repeat-container id="vertical-container" flex>
      <div md-virtual-repeat="FeedFlow in PostController.data" md-on-demand class="repeated-item" flex>
        <div ng-repeat="text in FeedFlow.feed">
          {{FeedFlow.id}} <!-- whose post is this?  -->
          {{text.status}} <!-- status -->
        </div>
      </div>
    </md-virtual-repeat-container>
  </md-content>
</div>

的style.css

.virtualRepeatdemoInfiniteScroll #vertical-container {
    height: 292px;
    width: 400px;
}

.virtualRepeatdemoInfiniteScroll .repeated-item {
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    height: 40px;
    padding-top: 10px;
}

.virtualRepeatdemoInfiniteScroll md-content {
    margin: 16px;
}

.virtualRepeatdemoInfiniteScroll md-virtual-repeat-container {
    border: solid 1px grey;
}

.virtualRepeatdemoInfiniteScroll .md-virtual-repeat-container .md-virtual-repeat-offsetter {
    padding-left: 16px;
}

的script.js

angular.module('feed', ['ui.router', 'ngMaterial']);

angular.module('feed').run(
  ['$rootScope', '$state', '$stateParams',
    function($rootScope, $state, $stateParams) {
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
    }
  ]
)

.config(
  ['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {
      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
      });

      $stateProvider
        .state('posttest', {
          url: '/post1',
          templateUrl: 'template.html',
          resolve: {
            data: 'vm.data',
          },
          controller: 'PostController'
        });
    }
  ]
);


// This is how I normally fetch a feed page. (PostData factory)
// I commented out this part and tried to inregrate it below at PostController section.

/*
angular.module('feed').factory('PostData', ["$http", function($http) {
  return $http.get("/feed/1").then(function(response) {
    return response.data;
  });
}]);
*/


// This is the part I couldn't inregrate it.
// Original link is here : https://material.angularjs.org/latest/demo/virtualRepeat
// I'm trying to implement Infinite Scroll, a demo can be seen below 
// http://codepen.io/anon/pen/NxeVwo

angular.module('feed').controller('PostController', ['$scope', '$http', function($scope, $http, $timeout) {
  var vm = this;
  vm.data = {
    numLoaded_: 0,
    toLoad_: 0,
    items: [],

    // Required.
    getItemAtIndex: function(index) {
      if (index > this.numLoaded_) {
        this.fetchMoreItems_(index);
        return null;
      }
      return this.items[index];
    },

    // Required.
    getLength: function() {
      return this.numLoaded_ + 1;
    },

    fetchMoreItems_: function(index) {
      if (this.toLoad_ < index) {
        this.toLoad_ += 1;
        $http.get('/feed/' + this.toLoad).then(angular.bind(this, function(response) {
          this.items = this.items.concat(response.data);
          this.numLoaded_ = this.toLoad_;
        }));
      }
    }
  };
}]);

Angular-material无限滚动和$ http

0 个答案: