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>

角：

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

查看我的解决方案。

您需要添加一些控件以向后和向前分页，并将click事件绑定到页面变量的递增/递减。我改变了你的工厂，所以我们可以用参数调用图像检索器。我将页面变量放入控制器范围，以便我们可以更轻松地访问它，并使用它来打开或关闭我们以前的控件。

这些照片进展很快，所以视图有时不会发生很大变化，但这样做可以满足您的需求：

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>

Answer 2

使用ng-src，img src...不允许使用动态数据。它在文档https://docs.angularjs.org/api/ng/directive/ngSrc

中清楚地说明了

AngularJS，来自flickr的图像分页

2 个答案: