AngularJs的$scope就像一个本地变量

AngularJs $scope like a local var

本文关键字：一个 变量 scope AngularJs      更新时间：2024-03-10

我有一些问题。

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表现得像本地var？帮助，当我尝试在视图中绑定数据时，它不起作用。但在类似的控制器中，它是有效的。

控制器工作原理：

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

这是因为callback。当您在第一种情况下console.log时，它在返回回调之前执行，此时$scope.info就是undefined。执行以下操作以获得预期结果：

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

如果您想了解callback在javascript中的工作原理，可以查看nexttick。例如：https://howtonode.org/understanding-process-next-tick

在您的示例中，.success（）方法是一个回调。当post方法完成时，此方法将异步执行。

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

从你的评论来看，我怀疑你遇到的问题是，当设置了$scope.info值时，视图没有更新？如果是这种情况，您需要将回调封装在$apply方法中

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

变量$scope.info在$http发布完成后的成功回调中定义。

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

您无法访问$scope.info，因为它在$http调用之前是未定义的。

相关文章：