Problem mit $ scope mit Versprechungen

Question

Ich versuche, einen einfachen Controller einzurichten, der einen asynchronen http-Aufruf unter Verwendung eines Dienstes ausführt. Ich habe etwas sehr ähnliches für einen anderen Controller eingerichtet, den ich geschrieben habe, aber aus irgendeinem Grund funktioniert dieser nicht. Die console.log ($ scope.art); Zeile im then() - Block gibt die korrekten Daten aus, aber sobald sie außerhalb des then() - Blocks ist, ist $ scope.art undefiniert. Warum sollte das sein? Ich bin sehr verwirrt!

app.controller('FeedbackController', ['$scope','getArt', function($scope, getArt) { 
     var art = getArt(); 
     art.then(function(result) { 
      $scope.art = result; 
      console.log($scope.art); 
     }, function(reason) { 
      $scope.error = reason; 
     }); 
     console.log($scope.art); 
}]) 
.factory('getArt', ['$http', '$q', function($http, $q) { 
    return function() { 

     var deferred = $q.defer(); 
     $http.post("/php/getArt.php") 
      .success(function (response) { 
       if (response == "nope") { 
        deferred.reject("Whoopsie! Something seems to have gone wrong."); 
       } else { 
        deferred.resolve(response); 
       } 
      }) 
      .error(function() { 
       deferred.reject("There seems to be an issue with your connection."); 
      }); 
     return deferred.promise; 
    }; 
}]); 

Vielen Dank !!

Answer 1

Die http-Aufrufe sind asynchron, daher führt Sie console.log($scope.art); führt vor der HTTP-Aufruf beendet. Sie können jede Nachbearbeitung im Callback then durchführen.

Oder wenn Sie nur das Objekt art für den Benutzer anzeigen müssen, wird es angezeigt, sobald die Daten vom Server zurückgegeben werden. Vielleicht können Sie so etwas wie dies hinzufügen, dass die Daten, um anzuzeigen, wird gerade vom Server geladen:

<div ng-if="!art">loading...</div> 
 
<div ng-if="art">... display it for the user ...</div>

Answer 2

Im folgenden Code

app.controller('FeedbackController', ['$scope','getArt', function($scope, getArt) { 
    var art = getArt(); 
    art.then(function(result) { 
     $scope.art = result; //line 4, executed some time in the future 
     console.log($scope.art); //line 5 
    }, function(reason) { 
     $scope.error = reason; 
    }); 
    console.log($scope.art); //line 9, synchronously, executed right away 
}]) 

Linie 9 nach der unmittelbar rechts ausgeführt wird Aufruf an den Server wird gefeuert, was vor Zeile 4 und Zeile 5 ist (wenn das Versprechen erfüllt ist), wenn das passiert $ scope.art ist immer noch undefined (oder noch einigen alten Wert hat)

Als Referenz ist hier ein Artikel, die JavaScript async wirklich gut http://tutorials.pluralsight.com/front-end-javascript/introduction-to-asynchronous-javascript