Question

var myApp = angular.module('myRealApp',[]);

   myApp.controller('myController',function($scope,$http){
   "use-strict";

   $scope.content = [];

   $scope.fetchContent = function () {
    $http({
         method : 'POST',
         ContentType : "application/json",
         url : "http://localhost:8080/myUrl",
         headers : { 'Content-Type' : 'application/json'}   
    })
    .success(function(response){
         $scope.content = response;
         console.log($scope.content); //Shows the returned object from server

    });
   }

   $scope.fetchContent();
   console.log($scope.content); //Shows as []
}

当我加载页面时，$ scope.fetchContent被调用并从服务器获取数据，并将其分配给$ scope.content。但是，当我在此函数之外访问$ scope.content时，它仍然将其值显示为[]。我在这做什么错？

从服务器返回的数据是一个对象列表。（Java到JSON数组的ArrayList）。

Answer 1

open创建一个将在解析对$http的ajax调用时解决的承诺。当浏览器到达http://localhost:8080/myUrl行时（在创建承诺后几行），承诺尚未解决。

如果您希望在console.log($scope.content);的之外解决您的承诺（例如console.log），您必须获得承诺并使用{{1承诺.success()创建的承诺如下：

.then()

旁注：您应该将$http行放在文件的顶部
side-note²：注意创建这样的控制器："use-strict"; var myApp = angular.module('myRealApp',[]); myApp.controller('myController',function($scope,$http){ $scope.content = []; $scope.fetchContent = function () { return $http({ //line changed method : 'POST', ContentType : "application/json", url : "http://localhost:8080/myUrl", headers : { 'Content-Type' : 'application/json'} }); } var promise = $scope.fetchContent(); promise.then(function() { //line changed console.log($scope.content); }); }在缩小时会产生错误更喜欢redondant版本："use-strict";

Answer 2

$ http是异步的。您的流程顺序如下：

-> fetchContent()
-> console.log($scope.content) // outside of your $http
-> $http.success

无论如何，内容将显示在您的html模板中，因为有角度正在观察您的范围，所以不要担心。如果要在获取数据后运行另一个进程，请在成功回调函数中调用该函数

如何使这个AngularJS控制器工作（$ scope变量未在控制器中初始化）？

2 个答案: