AngularJS：函數內的變量$ scope在函數外未定義

Question

我是AngularJS的新手，但我陷入了困境：\\需要幫助，請！

以下代碼的目的是從數據庫獲取特定數據（整數），以便構建甜甜圈圖。 我運行函數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稱為異步服務，並在返回時保證您的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 3

您的問題是由於異步方法調用。 顯然，您不會僅在“ 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){
}

Answer 4

您問題的本質是異步的。 GraphService.getAmmountOfFinishedOrders()是一個異步調用，這意味着您直接轉到下一行代碼，即：

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

僅在解決了諾言（從服務器返回響應）后，才觸發成功/錯誤，然后進入這些代碼塊。

關於做什么，這取決於您需要實現的目標。 如果您需要分配給變量，則只需執行此操作即可。 如果您需要返回某些內容，則需要使用其他方法。