AngularJS $ scope.foo設置了服務，但後來在同一個控制器undefined

Question

我有一個服務調用API並獲取json響應。我將這個服務注入到我的控制器中，並嘗試用這個接收到的數據設置$ scope.tank變量。當我嘗試稍後使用這個變量時（在同一個控制器中！）它是未定義的。但有趣的是，數據顯示在前端。

我看遍了所有的stackoverflow，我無法弄清楚這一點。我創建了一個plunker例子 - http://plnkr.co/edit/DkFNE8E9897dSF19eaU9?p=preview

我的服務：

appServices.service('TankService', function($q, $http) { 

    var data, deferred = $q.defer(); 

    return { 

     init: function(id) { 

      var defer = $q.defer(); 

      $http.get(options.api.base_url, { cache: 'true'}) 
      .success(function(response) { 
       data = response; 
       deferred.resolve(data); 
      }); 

     }, 

     // return promise 
     getData: function() { 
      return deferred.promise; 
     } 

    }; 

}); 

我打電話給我的數據，控制器是這樣的：

appControllers.controller('TankViewCtrl', ['$rootScope', '$scope', '$q', '$routeParams', '$location', '$sce', '$route', 'TankService', 
    function TankViewCtrl($rootScope, $scope, $q, $routeParams, $location, $sce, $route, TankService) { 

     var id   = $routeParams.tank_id; 
     $scope.id  = id; 
     $scope.tank  = []; 

     // call our data 
     TankService.init(id); 

     TankService.getData().then(function(data){ 
      $scope.tank = data; 
     }); 

     // why is this undefined? 
     console.log($scope.tank); 

    } 
]); 

預先感謝您的幫助！

Answer 1

HTTP調用是異步請求。

您要求您的控制器顯示請求的結果，而不是事先確定您有答案。這就是爲什麼你得到undefined。

用途：

TankService.getData().then(function(data){ 
    $scope.tank = data; 
    console.log($scope.tank); 
});