如何处理Angular service $http调用中不断变化的数据

Question

我正在创建一个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>

但是，因为照片列表是在调用detail视图的链接时更新的，所以结果视图不是正确的照片，因为当第二个控制器使用该服务时，数组被更改了。

我想要实现的是从flickrAPIservice填充一次photosList，然后当从第二个控制器调用该服务时，让它使用现有的数据，而不是重新获得它。

我应该把照片放到全局数组中吗?我试图避免这种情况，因为我很确定这不是"Angular的方式"?

Answer 1

使用作用域继承

<div ng-controller="parentCtrl">
   <div ng-controller="childOneCtrl"></div>
   <div ng-controller="childTwoCtrl"></div>
</div> 

将数组存储在父控制器的作用域中，如下所示:

  controller('parentCtrl', function($scope, flickrAPIservice) {
    $scope.photosList = [];
    flickrAPIservice.getPhotos().success(function (response) {
        $scope.photosList = response.items;
    });
  })

然后在子控制器上像这样访问它:

  controller('childOneCtrl', function($scope) {
    console.log($scope.photosList);
  }).controller('childTwoCtrl', function($scope) {
    console.log($scope.photosList);
  })

它会在那里，并且应该保持同步，因为$digest是隐性的。