AngularJS:如何获取$http结果作为函数的返回值

Question

在我的控制器中，我需要一个函数来获取参数并从服务器返回URL。像这样：

$scope.getPoster = function(title) {
    return $http.get("http://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json");
};

在我的视图中，我需要以这种方式传递标题并获得结果作为ng-src的src：

<div class="col-sm-6 col-md-3" ng-repeat="movie in movies">
    <div class="thumbnail">
        <img class="poster" ng-src="{{getPoster(movie.Title)}}" alt="{{movie.Title}}">
        <div class="caption">
            <h3>{{movie.Title}}</h3>
            <p>{{movie.Owner}}</p>
        </div>
    </div>
</div>  

我知道 HTTP 通信永远不会立即返回我需要的数据$http因为所有通信都是异步的，所以我需要使用 promise：

$scope.getPoster = function(title) {
    $http({ url: "http://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json" }).
    then(function (response) {
        // How can I return response.data.Poster ? 
    });
};

所以我的问题是，我怎样才能将响应作为函数的结果返回getPoster？
知道吗？

Answer 1

如果你把movie传递给getPoster函数，而不是title，它应该工作;并将一个变量绑定到ng-src而不是返回getPoster函数，它应该工作。

此外，您可以在等待响应时显示占位符：

.HTML：

<img class="poster"
     ng-init="movie.imgUrl = getPoster(movie)"
     ng-src="{{movie.imgUrl}}"
     alt="{{movie.Title}}">

_{* 请注意，ng-init当然可以用控制器内初始化替换。}

.JS：

$scope.getPoster = function(movie) {
    $http({ url: "http://www.omdbapi.com/?t=" + movie.Title+ "&y=&plot=short&r=json" })
    .then(function (response) {
        movie.imgUrl = response.data.Poster;
    });
    return "/img/poster-placeholder.png";
};

返回response后，movie.imgUrl将更改。

因此，图像将在下一个摘要周期中自动更新为新源。

对于此示例，您无需返回承诺。

Answer 2

使用 ng-repeat 时，可以传递整个 movie 对象，然后可以向其添加新属性：

$scope.getPoster = function (movie) {
    $http({ url: "http://www.omdbapi.com/?t=" + movie.Title + "&y=&plot=short&r=json" }).
            then(function (response) {
                // How can I return response.data.Poster ? 
                movie.imageUrl = response.data.Poster;
            });
};

然后绑定ngSrc：

ng-src='{{movie.imageUrl}}'

Answer 3

这是您案例的工作 jsFiddle。请注意，我已经拍摄了示例标题。

您不能在 ng-repeat中调用该函数。您需要在加载之前获取值，例如使用 resolve。

     var app = angular.module('myApp',[]);
app.controller('myCtrl',function($http,$scope){
          $scope.movies =[{Title:'gene',Owner:'Alaksandar'},{Title:'alpha',Owner:'Me'}];
            angular.forEach($scope.movies,function(movie){
                $http.get("http://www.omdbapi.com/?t="+movie.Title+"&y=&plot=short&r=json").
                        success(function (response) {
                            movie['poster'] = response.Poster;
                    });

            });
});

Answer 4

这是另一种方法，这可能更适合您。

模板：

<div class="col-sm-6 col-md-3" ng-repeat="movie in getMovies">
<div class="thumbnail">
    <img class="poster" ng-src="{{movie.Poster}}" alt="{{movie.Title}}">
    <div class="caption">
        <h3>{{movie.Title}}</h3>
        <p>{{movie.Owner}}</p>
    </div>
</div>

服务：

function getMovieData(movies) {
return {
    loadDataFromUrls: (function () {
        var apiList = movies;
        return $q.all(apiList.map(function (item) {
            return $http({
                method: 'GET',
                url: "http://www.omdbapi.com/?t=" + item + "&y=&plot=short&r=json"
            });
        }))
        .then(function (results) {
            var resultObj = {};
            results.forEach(function (val, i) {
                resultObj[i] = val.data;
            });
            return resultObj;        
        });
    })(movies)
};
};

控制器：

var movies = ["gladiator", "seven"];  
$scope.getMovies = getMovieData(movies);
function getMovieData(){
dataService.getMovieData(movies).loadDataFromUrls
  .then(getMovieDataSuccess)
  .catch(errorCallback);
}

function getMovieDataSuccess(data) {
    console.log(data);
    $scope.getMovies = data;
    return data;
  }