AngularJS，来自flickr的图片分页

I am creating an app that should fetch images from flickr and show 20 of them on each page. Now, there are many custom directives out there for pagination of text data from JSON, but I've no idea how to make it work with images. I've tried with dirPagination.js which is kinda popular, but I couldn't make it to work. Ill provide the code, and kindly ask for help with this one. HTML:

我正在创建一个应用程序，可以从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; 
            }); 
}]);

2 个解决方案

#1

Check out my solution below.

看看下面我的解决方案。

You need to add in some controls to paginate back and forward and bind there click event to increment/decrement from your page variable. I altered your factory a bit so we can call the image retriever with a parameter. I pu the page variable into the controller scope so we could access it within our dom easier, and use that to turn our previous controls on or off.

您需要添加一些控件来对页面进行前后分页并绑定那里的单击事件以从页面变量中增加/减少。我对您的工厂做了一点修改，以便我们可以使用参数调用映像检索器。我将页面变量放入控制器范围，这样我们就可以更容易地在dom中访问它，并使用它来打开或关闭以前的控件。

These photos are coming in fast, so the view doens't change a whole lot sometimes, but this does what you're looking for:

这些照片来的很快，所以视图有时不会有太大的变化，但这是你想要的:

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>

#2

Use ng-src, img src... does not allow dynamic data. It clearly says in the docs https://docs.angularjs.org/api/ng/directive/ngSrc

使用ng-src,img src……不允许动态数据。它在docs https://docs.angularjs.org/api/ng/directive/ngSrc中有明确的说明

#1