Question

我已经在Angular工作了一个月了。我一直在努力寻找范围和保持观点之间的状态。

我不知道如何以角度调试，所以我使用控制台在加载视图时跟踪范围的值。

这是我的控制员之一：

.controller('LegDetailCtrl',function($scope,$stateParams, LegService,ControllerService){
    $scope.reservation = ControllerService.getReservation();
    LegService.getLeg($stateParams.legId).then(function(data){
        ControllerService.setLeg(data.data);
        $scope.leg = data.data;
        console.log('Check leg',angular.toJson($scope.leg));
    });

    $scope.seats = LegService.getSeats();
    $scope.pax = LegService.getPax();
    $scope.user = ControllerService.getUser();
    $scope.reservation.leg = $scope.leg;
    $scope.reservation.client = $scope.user;
    $scope.reservation.pax = $scope.pax;
    console.log('Check scope leg', angular.toJson($scope.leg));
})

据我所知，在JS中，执行是按从上到下的顺序执行的（不确定）。我想这样，我正在处理然后设置$ scope.leg值，然后我用它来提供$ scope.reservation对象。

对我来说，正确的控制台输出是：

log Check leg, {aJsonObject}
log Check scope leg, {anotherJsonObject}

但我得到的是：

log Check scope leg,
log Check leg, {aJsonObject}

因此，看起来它将所有值设置为范围，然后执行LegService.getLeg（）方法。

如何让它以正确的顺序运行？

提前致谢。

Answer 1

如果你正在使用chrome，那么一个名为Batarang的AngularJS应用程序的调试工具很棒

要解决您的问题，您可以将您的承诺链接如下。

function LegDetailCtrl($stateParams, LegService, ControllerService){
    var vm=this;
    vm.reservation=ControllerService.getReservation();

    LegService
        .getLeg($stateParams.legId)
        .then(function(data){
            ControllerService.setLeg(data.data);
            vm.leg=data.data;
            return data.data;
        })
        .then(function(data) {
            var user=ControllerService.getUser();
            var pax=LegService.getPax();
            var seats=LegService.getSeats();

            vm.seats=seats
            vm.pax=pax
            vm.user=user
            vm.reservation.leg=vm.leg;
            vm.reservation.client=user
            vm.reservation.pax=pax
        });
}
LegDetailCtrl.$inject=['$stateParams', 'LegService', 'ControllerService'];

angular
    .module('yourModule')
    .controller('LegDetailCtrl', LegDetailCtrl)

Answer 2

以下行中的.then(

LegService.getLeg($stateParams.legId).then(function(data){

是对then-block内部函数的异步调用（包含“Check leg”）

执行被推迟到javascript的事件循环为空（javascript只是单线程）。这意味着首先执行main函数的代码（结果是“Check scope leg”）之后执行then-block内的异步调用（“Check leg”）

Answer 3

如果您在浏览器之外运行此代码，则会发现传递给console.log的回调中的then调用根本不会被调用。这是因为在getLeg返回的承诺得到解决之前不会调用回调，并且直到下一个角$digest周期才会发生回调。

Angular $ scope值以相反的顺序设置

3 个答案: