Question

我对AngularJS有一般的了解，似乎无法理解我的问题的原因如下：

我有一个.service（“SearchMovieService”），我在其中定义了GET方法，并返回一个promise。

 angular
        .module('module.search-movie')
        .service('SearchMovieService', SearchMovieService);

 SearchMovieService.$inject = ['$q', '$http'];
function SearchMovieService($q, $http){
        var movieService = this;
        var deferred = $q.defer();
        movieService.getMovies = function(movieName){
            $http.jsonp('http://api.themoviedb.org/3/search/movie?callback=JSON_CALLBACK&query='+movieName+'&api_key=8484e8613a3235332750c33a23a109b1').then(function(response){
                    deferred.resolve(response);
                    console.log(response)
            });
        return deferred.promise
    }
}

在我的.controller（“SearchMovieController”）中，我有一个方法，使用“movieName”作为从视图的输入字段传递的参数进行GET调用。

    var movie = this;
            movie.movies = [];

            movie.searchMovie = function(movieName) {
            if (movieName !== undefined && movieName !== null) {

                SearchMovieService.getMovies(movieName).then(function (response) {
                 movie.movies = response.data.results;
                console.log(movie.movies);
                });
            }
        };

以下是我的观点：

       <input class="form-control" type="text" placeholder="enter a movie name" ng-model="movie.movieName">
<button class="btn btn-info" type="submit" ng-click="movie.searchMovie(movie.movieName)">

问题： 当我在输入字段中输入电影名称并单击搜索时，它会在“movie.movies”对象中填充电影数组。然后，当我键入不同的电影名称并单击搜索时，阵列不会更改。但是，Service中的console.log（响应）显示新数组，但控制器中的console.log（响应）仍显示第一个数组。

任何人都可以帮忙解决这个问题吗？我正在使用ControllerAs，我尝试过$ watch，$ apply和$ digest ......它说它们已经在使用中。不知道发生了什么。

Answer 1

这是控制器中完成的异步调用的问题。从函数返回异步值非常困难，在我看来，直接在控制器内执行调用会更容易。

if (movieName !== undefined && movieName !== null) {
    $http.jsonp('http://api.themoviedb.org/3/search/movie?callback=JSON_CALLBACK&query='+movieName+'&api_key=8484e8613a3235332750c33a23a109b1').then(function(response){
        console.log(response);
        $scope.$apply(function() { // Might need this
             movie.movies = response.data.results;
        })
        console.log(movie.movies); // WILL RETURN NEW ARRAY
    });
    console.log(movie.movies); // WILL RETURN OLD ARRAY
}

您的return服务内部正在返回旧数组，因为尚未收到异步调用。除非另有说明，否则任何$http都将是异步的，但我个人会保持异步。

在AngularJS中调用GET后，控制器内对象的值不会改变？

1 个答案: