AngularJS：函數內部的變量$ scope在函數外部顯示爲undefined

Question

我是AngularJS的新手，我卡住了：\ NEED HELP，please！

下面的代碼的目的是從數據庫中獲取一個特定的數據（一個整數），以建立一個圓環圖。 我運行函數dataforGraphs（）以獲取該值。但是，在功能之外，我「放棄」了這個價值。

（代碼時，我提出的意見，以更好地解釋情況）

uONEControllers.controller('HomeCtrl', ['$scope', 'GraphService', 
function ($scope, GraphService) { 


    var ammountOfFinishedOrders = {}; 

    dataforGraphs(); // calling the function 

    function dataforGraphs() { 

     GraphService.getAmmountOfFinishedOrders() 
      .success(function (data) { 
       $scope.ammountOfFinishedOrders = data.GetAmmountOfFinishedOrdersResult; 
      //this console.log shows me the value 3. Excellent! 
      console.log("value 1:", $scope.ammountOfFinishedOrders) 

      }) 
      .error(function (error) { 
       $scope.status = 'Unable to load data:' + error.message; 
      }); 
      //HOWEVER... here is undefined 
      console.log("value 2:", $scope.ammountOfFinishedOrders) 
    }; 

      //here, outside the function, too :(
      console.log("value 3:", $scope.ammountOfFinishedOrders)   

    //building the doughnut graphic 
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; 

     //THE PROBLEM IS HERE. The $scope.ammountOfFinishedOrders is undefined! WHY?? 
    $scope.data = [ 
     $scope.ammountOfFinishedOrders, 4, 1, 3, 2, 1, 4 
    ]; 

}]); 

我已經嘗試返回$ scope.ammountOfFinishedOrders，但仍然一無所獲。這可能是範圍繼承問題嗎？如果是的話，我應該怎麼做才能解決這個問題？如果沒有...好吧，無論如何幫助我：D

非常感謝！

Answer 1

您正在使用AJAX調用更新ammountOfFinishedOrders（異步），並且您正試圖在腳本更新之前（即收到響應之前）訪問它。因爲你無法獲得價值。

因此，您應該將代碼移動到成功回調函數中，即$ scope.data。

.success(function (data) { 
     $scope.ammountOfFinishedOrders = data.GetAmmountOfFinishedOrdersResult;  
     // move your code here 

}) 

您也可以在成功回調函數中調用函數，並在該函數中執行更新。

.success(function (data) { 
      $scope.ammountOfFinishedOrders = data.GetAmmountOfFinishedOrdersResult;  
      updateScope(); 

    }) 

var updateScope = function() { 
    // your code here 
}; 

Answer 2

你的問題的本質是異步的。 GraphService.getAmmountOfFinishedOrders()是一個異步調用，這意味着你向右走至下一行代碼，這就是：

//HOWEVER... here is undefined 
console.log("value 2:", $scope.ammountOfFinishedOrders) 

只有一次的承諾得到解決（你從服務器獲得響應後）的成功/錯誤觸發，你進入這些代碼塊。

關於做什麼，這取決於你需要達到什麼。如果你需要分配給一個變量，那麼就這樣做。如果你需要回到某種東西，那需要採取不同的方法。

Answer 3

這是非常簡單的朋友:-)

你叫這是異步服務，雖然它返回它的承諾你console.log("value 2:", $scope.ammountOfFinishedOrders)和console.log("value 3:", $scope.ammountOfFinishedOrders)已經執行這樣肯定會是不確定的。

爲了克服這一點，你可以做

$scope.$watch(ammountOfFinishedOrders,function(newVal){ 
$scope.data = [ 
     newVal, 4, 1, 3, 2, 1, 4 
    ]; 

}）;

要不然把你的成功裏面

GraphService.getAmmountOfFinishedOrders() 
      .success(function (data) { 
       $scope.ammountOfFinishedOrders = data.GetAmmountOfFinishedOrdersResult; 
$scope.data = [ 
     $scope.ammountOfFinishedOrders, 4, 1, 3, 2, 1, 4 
    ]; 
      //this console.log shows me the value 3. Excellent! 
      console.log("value 1:", $scope.ammountOfFinishedOrders) 

      }) 
      .error(function (error) { 
       $scope.status = 'Unable to load data:' + error.message; 
      }); 

希望它能幫助:)

Answer 4

您的問題是，因爲異步方法調用。顯然，你不會在「dataforGraphs」方法下面得到結果。

以更好的方式，您可以通過CallBack方法處理此問題。當GraphService方法執行，將它稱之爲「成功」或「錯誤」回調，可以從那裏調用你的回調方法，這樣

function dataforGraphs(SuccessCallBack, FailedCallBack) { 

     GraphService.getAmmountOfFinishedOrders() 
      .success(function (data) { 
SuccessCallBack(data.GetAmmountOfFinishedOrdersResult); 

      }) 
      .error(function (error) { 
       $scope.status = 'Unable to load data:' + error.message; 
FailedCallBack(error); 
      }); 

    }; 

function SuccessCallBack(result){ 
    //do your success logic here 
} 

function FailedCallBack(error){ 
}