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

The value of an object inside the controller doesn't change after GET call in AngularJS ??

本文关键字：对象 控制器 AngularJS 调用 GET      更新时间：2023-09-26

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

我有一个.service（"SearchMovieService"），其中定义了GET方法，它返回了一个承诺。 

 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"对象中填充电影数组。然后，当我键入其他电影名称并单击"搜索"时，数组不会更改。但是，服务中的控制台.log（响应）显示新数组，但控制器中的控制台.log（响应）仍显示第一个数组。

谁能帮忙解决这个问题？我正在使用控制器，我已经尝试了$watch，$apply和$digest...它说它们已经在使用中。不知道发生了什么。

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

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都将是异步的，但我个人会保持异步。

相关文章：