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

Question

我已经在 Angular 上工作一个月了。我一直在努力确定 View 之间的范围和保持状态。

我不知道如何以 Angular 进行调试，因此我在加载 View 时使用控制台来跟踪范围的值。

这是我的 Controller 之一:

.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，有一个很棒的 AngularJS 应用程序调试工具，名为 Batarang.

要解决您的问题，您可以像下面这样链接您的 promise 。

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)