AngularJs $范围就像一个局部变量

时间:2016-04-07 10:09:46

标签: javascript angularjs angularjs-scope angular-http

我有一些问题。

app.controller('groupConfigCntrl', ['$http', '$scope', '$routeParams', function($http, $scope, $routeParams){

            var id = $routeParams.id,
                info = {};
            $http.post("/g/getGroup/", {id: id}).success(function(data) {
              $scope.info = data;
            });
              console.log($scope.info); 
    });

在这种情况下,$ scope.info未定义。

        $http.post("/g/getGroup/", {id: id}).success(function(data) {
          $scope.info = data;
          console.log($scope.info); 
        });

在这种情况下,$ scope.info - 有一些数据。为什么$ scope的行为类似于本地变量?帮助,当我尝试在视图中绑定数据时,它不起作用。但在类似的控制器中,它可以工作。

控制器有效:

app.controller('groupCntrl', ['$http', '$scope', '$uibModal', '$routeParams', '$location', function($http, $scope, $uibModal, $routeParams, $location){
    var id = $routeParams.id;
    $http.post("/g/getGroup/", {id: id}).success(function(data) {
      $scope.info = data;
    });
})

3 个答案:

答案 0 :(得分:0)

这是因为callback。在第一种情况下console.log时,它会在返回回调之前执行,并且$scope.infoundefined时为app.controller('groupConfigCntrl', ['$http', '$scope', '$routeParams', function($http, $scope, $routeParams){ var id = $routeParams.id, info = {}; $http.post("/g/getGroup/", {id: id}).success(function(data) { $scope.info = data; console.log($scope.info); }); }); 。按照以下方式获得预期结果:

nexttick

如果您想了解callback在javascript中的工作原理,可以查看ALTER TABLE $backup_tbl_name ADD `id` BIGINT unsigned NOT NULL AUTO_INCREMENT COMMENT 'Auto increment field for backup table.' PRIMARY KEY 。例如:https://howtonode.org/understanding-process-next-tick

答案 1 :(得分:0)

在您的示例中,.success()方法是回调。 post方法完成后,此方法异步执行。

这意味着当您在第一个示例中记录输出时,可能尚未设置$ scope.info值。

根据您的评论判断,我怀疑您遇到的问题是当设置$ scope.info值时视图没有更新?如果是这种情况,您需要将回调包装在$ apply方法

$http.post("/g/getGroup/", {id: id}).success(function(data) {
  $scope.$apply(function(){
    $scope.info = data;
  });
});

答案 2 :(得分:-1)

变量$scope.info$http帖子完成后在成功回调中定义。

$http.post("/g/getGroup/", {id: id}).success(function(data) {
              $scope.info = data;
              console.log($scope.info); 
            });

您无法访问$scope.info,因为$http来电之前未定义。