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.ammuntOfFinishedOrders，但仍然没有。这可能是作用域继承的问题吗？如果是，我到底应该怎么做才能解决这个问题？如果没有…好吧，无论如何都帮我：D

非常感谢！

Answer 1

您正在AJAX调用（异步）中更新ammuntOfFinishedOrders，并试图在更新脚本之前（即在收到响应之前）在脚本中访问它。正因为如此，你无法获得价值。

因此，您应该在success回调函数中移动您的代码，即$scope.data。

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

您也可以调用success回调函数中的一个函数，并在该函数中进行更新。

.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"方法下面得到结果。

在一个更好的方法中，您可以通过回调方法来处理这个问题。当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)

只有在承诺得到解决（您从服务器得到响应）后，成功/错误才会被触发，并且您会进入这些代码块。

关于该做什么，这取决于你需要实现什么。如果你需要给一个变量赋值，那么就这样做吧。如果你需要回到某件事上，那就需要一种不同的方法。