Question

下面添加了我的控制器代码。我想访问$ scope.FCGId的值.......如何访问这个变量？

 angular.module('hotelApp.controllers')
     .controller('menuCtrl', ['$scope','menu'
         function($scope,'menu') {

             $scope.categories = [];
             $scope.FCGId = 0

             $scope.items = [];

             $scope.getCategories = function() {
                 menu.getCategories().success(function(data) {
                     $scope.categories = data;
                     $scope.FCGId = data['rows'][0].GRPCOD;

                 });
             }

             $scope.getItems = function(gropuId) {
                 menu.getItems(gropuId).success(function(data) {
                     $scope.items = data;
                     console.log(data);
                 });
             }

             $scope.$on('$ionicView.afterEnter', function() {
                 $scope.getCategories();
                 console.log($scope.FCGId);
                 $scope.getItems($scope.FCGId);

             });
         }
     ]);

从上面开始，代码返回0而不是在getCategories（）函数中更新的值。

Answer 1

您的问题发生是因为javascript几乎总是比异步调用返回运行得快，所以$scope.getItems总是在$scope.getCategories返回之前调用。

要严格对API调用进行排序，您需要一个名为promise的强大构造。那里应该有很多资源，只是谷歌“有角度的承诺”，你很好=）

编辑：实际上，使用成功功能是最直接的方法

$scope.getCategories = function() {
    menu.getCategories().success(function(data) {
        $scope.categories = data;
        $scope.FCGId = data['rows'][0].GRPCOD;

        $scope.getItems($scope.FCGId);  // to here
    });
}

$scope.getItems = function(gropuId) {
    menu.getItems(gropuId).success(function(data) {
        $scope.items = data;
        console.log(data);
    });
}

$scope.$on('$ionicView.afterEnter', function() {
    $scope.getCategories();
    console.log($scope.FCGId);
    // $scope.getItems($scope.FCGId);  // move this line
});

通过这种方式，你不必处理所有那些$ q和d's。并且承诺 - 反模式。

Answer 2

好吧

$ scope.getCategories 函数正在进行异步调用在下面的事件

$scope.$on('$ionicView.afterEnter', function() {
                 $scope.getCategories();
                 console.log($scope.FCGId);
                 $scope.getItems($scope.FCGId);

             });

当您调用 $ scope.getCategories（）时，会发出此异步调用。

但是脚本没有等待完成该调用。并且脚本访问 console.log（$ scope.FCGId）; 中的 $ scope.FCGId 变量而没有初始化，因为异步cal没有完成。

解决方案。

您可以在控制器的开头调用 $ scope.getCategories 函数作为初始化部分或者您应该从 $ scope.getCategories 函数返回承诺或根据您的要求以其他方式使用承诺。

编辑代码。

定义 $ scope.getCategories ，如下所示

控制器中的

inejct $ q 。

var defer = $q.defer();       
$scope.getCategories = function() {
                 menu.getCategories().success(function(data) {
                    $scope.categories = data;
                   // $scope.FCGId = data['rows'][0].GRPCOD;
                    defer.resolve(data['rows'][0].GRPCOD);  
                    return defer.promise;

                 });
             }

以这种方式处理事件

 $scope.$on('$ionicView.afterEnter', function() {
                 $scope.getCategories().then(function(successData){
                 $scope.FCGId = successData
                  console.log($scope.FCGId);
                 });

                 $scope.getItems($scope.FCGId);

             });

解决方案-2。在调用 $ scope.getCategories 函数时也没有依赖性所以你可以在comptroller的启动时调用它。

与 $ scope.getItems 的调用相同。

Answer 3

看起来像你的menu.getCategories（）是一个异步执行块，并且由于延迟执行，你得到0作为$ scope.FCGId的值。

您可以将函数作为第二个参数传递给getCategories函数，该函数将被执行并执行必要的分配和进一步调用。

$scope.setFCGValue = function(data) {
     $scope.categories = data;
     $scope.FCGId = data['rows'][0].GRPCOD;
     $scope.getItems($scope.FCGId);
};

$scope.$on('$ionicView.afterEnter', function() {
     menu.getCategories().success($scope.FCGValue);
});

我们正在做的是传递我们的自定义函数，该函数将在getCategories（）部分之后执行。

$ scope变量值未在控制器Angular JS中更新？

3 个答案: