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){ 
}