javascript - Angularjs，用于Flickr图像的分页

Question

我正在创建一个应用程序，该应用程序应该从 flickr 获取图像并在每个页面上显示其中 20 个图像。现在，有许多自定义指令用于对 JSON 文本数据进行分页，但我不知道如何使其与图像一起使用。我尝试过 dirPagination.js ，它很受欢迎，但我无法让它工作。我将提供代码，并请求有关此问题的帮助。 HTML:

    <div ng-controller="recentImages">
<div ng-repeat="item in imageList.photos.photo">
    <div id="imgThumbs">
        <img src="https://farm{{item.farm}}.staticflickr.com/{{item.server}}/{{item.id}}_{{item.secret}}_m.jpg" alt=""/>    
    </div>      
</div>                                      
</div>  

Angular :

var App = angular.module('App', ['ngRoute']);


 var recent = "flickr.photos.getRecent";
var page = 1;

App.controller('recentImages', ['$scope', 'forAllone', function($scope, forAllone) {
    forAllone.success(function(data) {
    $scope.imageList = data;
  });
}]);



App.factory('forAllone', ['$http', function($http) { 
        return $http.get('https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&format=json&nojsoncallback=?&per_page=20&page='+page+'&api_key=5eb283c54e823624591d2c22db0217cb') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

Answer 1

在下面查看我的解决方案。

您需要添加一些控件来前后分页，并绑定(bind)单击事件以从页面变量递增/递减。我对您的工厂进行了一些更改，以便我们可以用参数调用图像检索器。我将页面变量放入 Controller 范围中，以便我们可以更轻松地在DOM中访问它，并使用它来打开我们以前的控件。

这些照片很快就会出现，因此有时候的 View 不会改变很多，但这可以做到您要寻找的东西:

var App = angular.module('App', []);

var recent = "flickr.photos.getRecent";

App.controller('recentImages', ['$scope', 'forAllone', function($scope, forAllone) {

  $scope.page = 0;
	$scope.nextPage = function() {
    $scope.page += 1;
    $scope.getPage()
  }
	$scope.prevPage = function() {
    $scope.page -= 1;
    $scope.getPage()
  }
  $scope.getPage = function() {
    $scope.imageList = [];
    forAllone.getPage($scope.page).success(function(data) {
      $scope.imageList = data;
    });
  }
}]).factory('forAllone', ['$http', function($http) {

  var factory = {};

  factory.getPage = function(page) {

    return $http.get('https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&format=json&nojsoncallback=?&per_page=20&page=' + page + '&api_key=5eb283c54e823624591d2c22db0217cb')
      .success(function(data) {
        return data;
      })
      .error(function(err) {
        return err;
      });
  }
  return factory;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
  <div ng-controller="recentImages" ng-init="getPage()">
    page: {{page}}
    <a ng-click="nextPage()" href="#next">next</a>
    <a ng-click="prevPage()" ng-if="page > 0" href="#prev">previous</a>
    <div ng-repeat="item in imageList.photos.photo">
      <div id="imgThumbs">
        <img ng-src="https://farm{{item.farm}}.staticflickr.com/{{item.server}}/{{item.id}}_{{item.secret}}_m.jpg" alt="" />
      </div>
    </div>
  </div>