角度$scope值以相反的顺序设置

Angular $scope values set in reverse order

本文关键字：顺序 设置 scope 角度      更新时间：2023-09-26

我已经在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（） 方法。

如何使其以正确的顺序运行？

提前谢谢。

如果您使用的是chrome，则有一个很棒的AngularJS应用程序调试工具，称为Batarang。.

为了解决您的问题，您可以像下面这样链接您的承诺。

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)

下一行中的.then(

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

是对 then-block 内函数的异步调用（其中包含"Check leg"）

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

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

相关文章：