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> 

Угловой:

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, чтобы увеличить/уменьшить значение переменной вашей страницы. Я немного изменил вашу фабрику, поэтому мы можем вызвать ретривер изображения с параметром. Я перечислил переменную страницы в область контроллера, чтобы мы могли получить доступ к ней внутри нашего дома, и использовать это, чтобы включить или выключить наши предыдущие элементы управления.

Эти фотографии приходят быстро, так что вид doens't изменить всего много иногда, но это делает то, что вы ищете:

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

 
var recent = "flickr.photos.getRecent"; 
 

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

 
    $scope.page = 0; 
 
\t $scope.nextPage = function() { 
 
    $scope.page += 1; 
 
    $scope.getPage() 
 
    } 
 
\t $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