0

我正在创建一个 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 填充照片列表一次，然后当从第二个控制器调用该服务时，让它使用现有数据，而不是重新获取它。

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

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

4

1 回答 1

0

使用范围继承。

<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通过孩子隐性一样。

于 2014-05-06T23:33:44.470 回答