Question

我已经创建了这段代码：

app.controller('SiteDetailCtrl',function($scope, $routeParams, $http){
    //remove ":" in SiteId
    var SiteId = $routeParams.SiteId.replace(':','');

    $scope.Site = $http.get('path-to-ajax/Site/'+SiteId);
        .success(function(data){
            $scope.Site = data;
            console.log($scope.Site);
        })
        .error(function(){
            $scope.Site = 'NULL';
            alert('Ajax Fail');
        });
        console.log($scope.Site);
});

我不明白为什么$scope.Site在Success函数中可用，但在$http} $scope.Site之外是null。请解释一下这里发生了什么。

我是AngularJS的新手。

Answer 1

您在第6行中定义的success处理程序函数将比第14行的console.log语句运行得晚。它不是特定于角度的，而是异步代码的工作原理。我建议你研究一下这个方向。

Answer 2

您在外部使用的Console.log在初始化控制器时立即执行，

所以$ scope.Site没有值

但是在从服务器返回数据后调用Success函数，因此值存在于Success函数

中

Answer 3

我还没有对它进行过测试，但显然事实是你从$ http $scope.Site = $http.get(... //its worng返回一个值，而且Valerij说$ http的性质是ajax意味着异步结果，导致这个错误。

你需要像这样使用它：

 app.controller('SiteDetailCtrl',function($scope, $routeParams, $http){
    //remove ":" in SiteId
    var SiteId = $routeParams.SiteId.replace(':','');

    $http.get('path-to-ajax/Site/'+SiteId);
        .success(function(data){
            $scope.Site = data;
            console.log($scope.Site);
        })
        .error(function(){
            $scope.Site = 'NULL';
            alert('Ajax Fail');
        });
       // console.log($scope.Site);
});

HTML：

{{$scope.Site}} //this will work,  asynchronously get results after Success function

AngularJS - $ scope outsite $ http

3 个答案: