Question

在下面的代码中，我尝试从photos控制器引用appService服务中的pictureCtrl数组，但效果不佳。当我尝试在HTML上调用模型时，唯一可行的是$scope.photoService引用appService。当我尝试在HTML上调用currentPhoto模型时，它不会显示任何内容。

我想在HTML页面上获取currentPhoto模型，引用photos数组的第一个索引作为对象，当我点击HTML上的收藏夹按钮时，它将运行sendFeedback方法，并将更改currentphoto。怎么办？

.controller('pictureCtrl', function ($scope, appService) {
  // angular.extend($scope, appService);
  $scope.photoService = appService;

  $scope.photos = appService.photos;

  $scope.currentPhoto = appService.photos[0];

  $scope.sendFeedback = function (bool) {
    if(bool) {}//add it to favorite

    var randomIndex = Math.round(Math.random() * flickrData.photos.length-1);
    $scope.currentPhoto = angular.copy($scope.service.flickrData.photos[randomIndex]);
  };


})

.factory('appService', function ($http) {

  var photoService = {};
  photoService.photos = [];
  photoService.feelingText = "";

  photoService.getFlickrPictures = function (text) {
    console.log('this has been called');
    return $http({
      method: "JSONP",
      url: apiUrl+'&text='+text+'&format=json&jsoncallback=JSON_CALLBACK'
    }).then(function (data) {
      photoService.photos = data.data.photos.photo;
      console.log('flickrData', photoService.photos);
    }, function(err){
      throw err;
    });
  };

  return photoService;
}

Answer 1

似乎照片数组从未填充过。由于您使用的是工厂，因此注入控制器的东西将成为photoService的新实例。

如果您第一次调用函数从$ http服务中获取数据，则只会看到照片。

我会在你的服务上创建一个函数loadPhotos，它会将数据作为对你控制器的承诺返回。

使用服务将数据传递给控制器

1 个答案: