Der Wert eines Objekts in der Steuerung ändert sich nicht nach GET-Aufruf in AngularJS ??

Question

Ich habe durchschnittliche Kenntnisse in AngularJS und kann nicht scheinen, den Grund für mein Problem unten zu verstehen:

Ich habe einen .service („SearchMovieService“), wo ich die GET-Methode definiert haben, und es gibt ein Versprechen.

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 
    } 
} 

In meinem .Controller („SearchMovieController“) Ich habe eine Methode, die einen GET-Aufruf „moviename“ tut als ein Argument aus dem Eingabefeld geleitet, um die Ansicht bilden.

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); 
       }); 
      } 
     }; 

Und hier ist meine Ansicht:

 <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)"> 

Problem: Wenn ich einen Filmnamen in Eingabefeld ein und klicken Sie auf Suche, es eine Reihe von Filmen in "movie.movies" auffüllt Objekt. Wenn ich dann einen anderen Filmnamen eintippe und auf Suche klicke, ändert sich das Array nicht. Die console.log (Antwort) im Service zeigt jedoch ein neues Array, aber die console.log (Antwort) im Controller zeigt immer noch das erste Array an.

Kann jemand in dieser Angelegenheit helfen? Ich benutze ControllerAs und ich habe $ watch, $ apply und $ digest ausprobiert ... es besagt, dass sie bereits benutzt werden. Nicht sicher, was passiert.

Answer 1

Dies ist ein Problem mit dem asynchronen Aufruf in der Steuerung. Es ist sehr schwierig, einen Async-Wert von einer Funktion zurückzugeben, und meiner Meinung nach wäre es einfacher, den Aufruf direkt im Controller auszuführen.

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 
} 

Ihr return innerhalb der Dienst das alte Array zurückkehrt wurde, weil der Asynchron-Aufruf noch nicht erhalten hatte. Any $http wird Async sein, wenn nicht anders angegeben, aber ich persönlich würde async bleiben.