服務返回undefined控制器

Question

這是我的服務：

'use strict'; 

    app 
    .service('myService', function($http) { 

     this.getJSON = function() { 
      return $http.get('someUrl/dataForm').then(function(data){ 
       return data.result; 
      }); 
     }; 
    }); 

而在我的控制，我有：

'use strict' 
     app.controller('myController', function ($scope, myService) { 

      myService.getJSON().then(function(data){ 
       $scope.myData =data; 
      }); 
      console.log($scope.myData); 
     }); 

我可以看到，HTTP調用成功返回一個JSON值，但控制檯日誌顯示myData的值未定義。 我在做什麼錯？

Answer 1

地點內

myService.getJSON().then(function(data){ 
       $scope.myData =data; 
       console.log($scope.myData); 
}); 

DEMO

Answer 2

更新在控制器

'use strict'; 
app.service('myService', function($http) { 
    this.getJSON = function() { 
    return $http.get('someUrl/dataForm').then(function(data){ 
      return data.result; 
     }); 
    }; 
}); 

控制器

'use strict' 
    app.controller('myController', function ($scope, myService) { 
     myService.getJSON().then(function(data){ 
      $scope.myData =data; 
      console.log($scope.myData); 
     }); 
    }); 

Answer 3

變化的代碼的代碼的console.log控制器：

'use strict' 
    app.controller('myController', function ($scope, myService) { 

     myService.getJSON().then(function(data){ 
      $scope.myData =data; 
      console.log($scope.myData); 
     }); 

    }); 

這會發生，因爲的getJSON是一個asycronous方法，請求的getJSON方法招惹了JavaScript等待響應，在「於是」將解決您的問題添加的console.log。

順便說一句，用的getJSON你是一個名爲 「諾言」 的概念工作，我讓你有關的鏈接解釋與$ HTTP

https://docs.angularjs.org/api/ng/service/$http

Answer 4

1. $ http.get（）返回承諾對象。
2. promise對象有then（），catch（），finally（）方法。

3. 然後調用成功時，捕獲錯誤。

   改變你的服務，

app.service('myService', function($http) { 
 
    this.getJSON = function() { 
 
    return $http.get('someUrl/dataForm'); //returns promise object 
 
    }; 
 
});

和控制器，

app.controller('myController', function($scope, myService) { 
 
    var promise = myService.getJSON(); 
 
    //after resolving then method get called 
 
    promise.then(function(data) { 
 
    $scope.myData = data; 
 
    console.log($scope.myData); 
 
    }); 
 
});