AngularJS摘要周期偶尔无法更新范围

Angular Devs！

当我一起使用ngAnimate和UI-Router时，我遇到了一些问题。基本上，我有五个子状态（"幻灯片"）构成了我的主要内容，每侧都有一个按钮。单击这些按钮时，将分别转到上一张和下一张幻灯片。

我正在使用 CSS3 翻译来制作幻灯片进入和退出的动画。当用户单击左按钮时，当前幻灯片向右退出，"上一张"幻灯片从左侧进入。单击右键时，情况正好相反：当前幻灯片向左退出，"下一张"幻灯片从右侧进入。这些幻灯片循环，因此幻灯片 0 转到幻灯片 4，反之亦然。

进入和退出视口的方向（请记住，幻灯片是 UI 路由器状态，因此它们在动画结束时从 DOM 中删除）由我应用于父元素的类确定。应用"左"类会使幻灯片向左动画，而"右"类则相反。

代码分为几个元素：

• appSlideDirective
  • 指令，其中包含滑动按钮和嵌入式 UI 路由器视图div（内容）
  • 处理用户按钮按下并将单击事件传递给 baseController 以进行状态转换
• 基本控制器
  • 属于父模块的控制器，管理状态服务
• stateService（仅由 baseController 使用）
  • 当指令向其发送事件时，在 UI 路由器状态之间导航
• slideService（仅由指令使用）
  • 管理"左"和"右"类的添加和删除（通过 ng-click）

指令 HTML：

<div id="slide-container">
    <div id="slide" data-ng-class="{ left: slide.getTransitionState().left, right: slide.getTransitionState().right }">
        <div id="slide-content" data-ui-view></div>
    </div>
</div>

相关指令代码：

angular.module('app').directive('appSlide', function(slideService) {
restrict: 'A',
    scope: {
        currentState: '=',
        numberOfStates: '=',
        loadPreviousState: '&onPreviousState',
        loadNextState: '&onNextState'
    },
    templateUrl: 'slide.html',
    link: function(scope, element) {
        scope.$on('$destroy', function() {
            element.empty();
        });
    },
    controller: function($scope, $timeout) {
        var vm = this;
        // ...
        vm.loadPreviousSlide = function() {
            slideService.preparePreviousSlide();
            $scope.loadPreviousState();
        });
        vm.loadNextSlide = function() {
            slideService.prepareNextSlide();
            $scope.loadNextState();
        });
        vm.getTransitionState = function() {
            return slideService.getTransitionState();
        };
        // ...
    },
    controllerAs: 'slide'
});

相关控制器代码：

angular.module('app').controller('baseController', function(stateService) {
    var vm = this;
    // ...
    vm.loadPreviousState = function() {
        stateService.loadPreviousState();
    };
    vm.loadNextState = function() {
        stateService.loadNextState();
    };
    // ...
});

相关服务代码：

angular.module('app').factory('slideService', function() {
    var _transitionState = {
        left: false,
        right: false
    };
    return {
        preparePreviousSlide: function() {
            _transitionState.right = false;
            _transitionState.left = true;
        },
        prepareNextSlide: function() {
            _transitionState.left = false;
            _transitionState.right = true;
        },
        getTransitionState: function() {
            return _transitionState;
        }
        // ...
    };
});
angular.module('app').factory('stateService', function($state) {
    // ...
    return {
        // ...
        loadPreviousState: function() {
            var targetState = _calculatePreviousState();
            $state.go( targetState );
        },
        loadNextState: function() {
            var targetState = _calculateNextState();
            $state.go( targetState );
        }
        // ...
    };
});

这工作得很好 - 在大多数情况下。第一个幻灯片切换在页面加载时无法动画化，因为"左"类和"右"类都不存在。同样，切换方向（即向左移动两次，然后向右移动一次）会使幻灯片从错误的一侧出现，因为上一个动画的"左"/"右"类仍在元素上。

经过一些挖掘，我想我已经偶然发现了为什么第一个/相反的动画失败了：ng-click事件启动一个摘要循环，阻止任何范围更改发生，直到其所有操作完成 - 这意味着状态在正确的"左"/"右"类之前被更改并且可以应用其相应的CSS3转换样式。因此，一旦我正确更新了"左"和"右"类，我就需要运行另一个摘要周期，然后才更改状态。

经历了大量的代码迭代，我当前的实现依赖于 $scope.$apply 和 $timeout 服务。为了强制另一个摘要周期，我运行 $scope.$apply - 我使用$timeout来防止"正在进行"错误。然后，当$timeout承诺得到解决时，我运行状态更改。

相关指令更新

vm.loadPreviousSlide = function() {
    var promise = $timeout(function() {
        $scope.$apply(function() {
            slideService.preparePreviousSlide();
        });
    }, 0, false);
    promise.then(function() {
        $scope.loadPreviousState();
    });
};
vm.loadNextSlide = function() {
    var promise = $timeout(function() {
        $scope.$apply(function() {
            slideService.prepareNextSlide();
        });
    }, 0, false);
    promise.then(function() {
        $scope.loadNextState();
    });
};

我对此有两个问题。首先，它冒犯了我的敏感性——它让我觉得它比它需要的更复杂。其次，它不是100%的工作。有时有效，有时无效。我不知道为什么它会失败。

你们怎么看？如果您想出更好的解决方案，或者您是否可以弄清楚为什么我的偶尔会失败，请告诉我！谢谢你的时间。

哦，最后一件事 - 我对AngularJS相当陌生，所以请随时提供有关代码结构或方法的建议！