函数内的变量$scope在函数外未定义

I am new with AngularJS and I am stuck :\ NEED HELP, please!

我是新加入AngularJS的，我被困住了:拜托，需要帮助!

The purpose of the code below is to get a specific data (an integer) from a DB in order to build a doughnut chart. I run the function dataforGraphs() in order to get that value. But then, outside the function, I "loose" that value.

下面代码的目的是从DB中获取特定的数据(一个整数)，以便构建甜甜圈图表。我运行函数dataforGraphs()以获取该值。但是，在函数之外，我“释放”那个值。

(during the code, I made comments to explain better the situation)

(在代码中，我做了一些注释来更好地解释这个情况)

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
    ];

}]);

I already tried to return the $scope.ammountOfFinishedOrders, but still nothing. Could it be a problem of scopes inheritance? If yes, what exactly should I do in order to solve this? If no... well, help me anyway :D

我已经尝试返回$范围。ammountOfFinishedOrders,但仍然什么都没有。这可能是范围继承的问题吗?如果是，我该怎么做才能解决这个问题?如果没有……好吧，不管怎样，帮帮我吧。

Many thanks!

很多谢谢!

4 个解决方案

#1

You are updating ammountOfFinishedOrders in an AJAX call (asynchronous) and you are trying to access it in your script prior to it being updated i.e. prior to the response received. Because of which you are not able to get the value.

您正在AJAX调用(异步)中更新ammountOfFinishedOrders，并试图在更新之前(即在收到响应之前)在脚本中访问它。因为它，你无法得到这个值。

So, you should move your code i.e. $scope.data inside the success callback function.

因此，您应该移动您的代码，即$scope。成功回调函数中的数据。

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

})

You can also call a function in the success callback function and do the updates in that function.

您还可以在success callback函数中调用一个函数，并在该函数中执行更新。

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

    })

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

#2

It's very simple pal:-)

这是非常简单的朋友:-)

You called GraphService which is async service and while it return it's promise your console.log("value 2:", $scope.ammountOfFinishedOrders) and console.log("value 3:", $scope.ammountOfFinishedOrders) already executed so definately it will be undefined.

您调用了GraphService，它是异步服务，当它返回时，它是承诺您的控制台。日志(“value 2:”，$scope.ammountOfFinishedOrders)和控制台。日志(“值3:”，$scope.ammountOfFinishedOrders)已经执行了，因此它将是未定义的。

To overcome this you can do

要克服这一点，你可以做到

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

});

or else put it inside your success

或者把它放在你的成功里面

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

Hope it helps :)

希望它能帮助:)

#3

Your problem is because of asynchronous method calls. Obviously you will not get your result just below the method "dataforGraphs" method.

您的问题是由于异步方法调用。显然，您不会在方法“dataforGraphs”方法下面获得结果。

In a better way you can handle this by CallBack method. When GraphService method executed it will it will call "success" or "error" callback, you can call your call back method from there, like this

通过回调方法可以更好地处理这个问题。当GraphService方法执行时，它将调用“success”或“error”回调，您可以从那里调用回调方法，如下所示

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

#4

The nature of your problem is asynchronous. GraphService.getAmmountOfFinishedOrders() is an asynchronous call, which means you go right to the next line of code, which is:

问题的本质是异步的。getammountoffinishedorders()是一个异步调用，这意味着您可以直接访问下一行代码，即:

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

Only once the promise is resolved (you get the response back from the server) that the success/error is triggered and you get inside those code blocks.

只有当承诺被解决(您从服务器获得响应)时，成功/错误被触发，并且您进入了这些代码块。

Regarding what to do, that depends on what you need to achieve. If you need to assign to a variable, then just do that. If you need to return to something, that would require a different approach.

关于要做什么，这取决于你需要实现什么。如果需要为变量赋值，那么就这样做。如果您需要返回到某个地方，则需要使用不同的方法。

#1