Question

我是AngularJS的新手，我被困住了：\需要帮助，请！

以下代码的目的是从DB获取特定数据（整数）以构建圆环图。我运行函数dataforGraphs（）以获取该值。但是，在功能之外，我＆＃34;松散＆＃34;那个价值。

（在代码中，我发表评论以更好地解释这种情况）

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

您的问题是因为异步方法调用。显然，你不会在方法＆＃34; dataforGraphs＆＃34;之下得到你的结果。方法

您可以通过CallBack方法更好地处理此问题。当GraphService方法执行时，它将调用＆＃34; success＆＃34;或＆＃34;错误＆＃34;回调，你可以从那里调用你的回叫方法，就像这样

 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)

只有在解决了promise（您从服务器返回响应）后才会触发成功/错误并进入这些代码块。

关于做什么，这取决于你需要达到的目标。如果您需要分配给变量，那么就这样做。如果你需要回归某些东西，那就需要采用不同的方法。

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

4 个答案: