我正在创建一个 Angular.js 应用程序来使用公共 Flickr API。我想在 Flickr 上创建最新照片的列表/详细视图。
我正在使用 Angular 中的工厂向两个控制器提供数据。这里是工厂服务:
angular.module('FlickrApp.services', []).
factory('flickrAPIservice', function($http) {
var flickrAPI = {};
flickrAPI.getPhotos = function() {
return $http({
method: 'JSONP',
url: 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK'
});
}
return flickrAPI;
});
以下是使用工厂服务的两个控制器(列表视图和详细视图各一个):
angular.module('FlickrApp.controllers', []).
controller('listController', function($scope, flickrAPIservice) {
$scope.photosList = [];
flickrAPIservice.getPhotos().success(function (response) {
$scope.photosList = response.items;
});
}).
controller('photoController', function($scope, flickrAPIservice) {
flickrAPIservice.getPhotos().success(function (response) {
$scope.photosList = response.items;
});
});
在详细视图中,我根据照片在项目数组中的位置创建了指向详细视图的链接,这很好用:
<a class="title_link" href="#/photos/{{photosList.indexOf(item)}}">{{item.title}}</a>
但是,由于在调用详细视图的链接时会更新照片列表,因此生成的视图不是正确的照片,因为当第二个控制器使用该服务时数组已更改。
我想要实现的是从 flickrAPIservice 填充照片列表一次,然后当从第二个控制器调用该服务时,让它使用现有数据,而不是重新获取它。
我应该将照片放入某种全局数组中吗?我试图避免这种情况,因为我很确定这不是“角度方式”?
任何帮助/建议将不胜感激。