如何在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>

但是，由于照片列表是在调用到详细视图的链接时更新的，因此当第二个控制器使用该服务时，由于阵列发生了更改，因此生成的视图不是正确的照片。

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

我应该将照片放入某种全局阵列中吗？ 我试图避免这种情况，因为我很确定这不是“角度方式”？

任何帮助/建议将不胜感激。

Answer 1

使用scopal继承。

<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对于孩子来说是隐性的。