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>

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

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

我应该将照片放入某种全局阵列吗？我试图避免这种情况，因为我很确定它不是＆＃39; Angular方式＆＃39;

非常感谢任何帮助/建议。

Answer 1

使用scopal inheritance.

<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通过孩子是隐性的。

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

1 个答案: