AngularJS 摘要循环偶尔无法更新范围

Question

Angular 开发者！

我运行在同时使用 ngAnimate 和 UI-Router 时遇到了一些问题。基本上，我有五个子状态 ("slides") 构成我的主要内容，每边都有一个按钮。这些按钮在单击时分别转到上一张和下一张幻灯片。

我正在使用 CSS3 翻译来为幻灯片的进入和退出设置动画。当用户点击左键时，当前幻灯片从右侧退出，"previous"幻灯片从左侧进入。单击右键时则相反：当前幻灯片从左侧退出，"next"幻灯片从右侧进入。这些幻灯片循环播放，因此从零号幻灯片到第四张幻灯片，反之亦然。

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

则相反

代码分为几个元素：

appSlideDirective
- 包含滑动按钮和嵌入式 UI-路由器视图的指令 div（内容）
- 处理用户按钮按下并将点击事件传递给 baseController 以进行状态转换
基础控制器
- 属于父模块的控制器，管理 stateService
stateService（仅被baseController使用）
- 在UI-路由器状态之间导航，当指令向它发送事件时
slideService（仅供指令使用）
- 管理 'left' 和 'right' class 添加和删除（通过 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 );
        }

        // ...
    };
});

这在大多数情况下效果很好。由于 'left' class 和 'right' class 都不存在，因此第一张幻灯片无法在页面加载时设置动画。同样，切换方向（即向左移动两次，然后向右移动一次）会使幻灯片从错误的一侧出现，因为先前动画的 'left'/'right' class 仍在元素上。

经过一些挖掘，我想我已经偶然发现了 first/opposite 动画失败的原因：ng-click 事件启动了一个摘要循环，该循环阻止发生任何范围更改，直到它的所有操作都完成完成——意味着状态在适当的 'left'/'right' class 之前改变，并且可以应用其相应的 CSS3 转换样式。因此，一旦我正确更新了 'left' 和 'right' classes，然后才更改状态，我需要运行另一个摘要周期。

我经历了很多代码迭代，我当前的实现依赖于 $scope.$apply 和 $timeout 服务。为了强制另一个摘要循环，我运行 $scope.$apply -- 我使用 $timeout 来防止 "in progress" 错误。然后我运行我的状态在 $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 还很陌生，所以请随时就代码结构或方法论提出建议！

Answer 1

我几个月前解决了这个问题。

我被迫实施了一个感觉明显不那么好的解决方案 "Angular"，但 100% 的时间都有效。

长话短说，我最终手动添加和删除了类，而不是等待下一个摘要周期。

例如：

var slide = angular.element(document.querySelector('#slide'));
slide.removeClass('right');
slide.addClass('left');

然后触发适当的状态转换变得微不足道。

AngularJS 摘要循环偶尔无法更新范围

AngularJS Digest Cycle Occasionally Fails to Update Scope

javascript

angularjs

angularjs-scope

ng-animate

angular-ui-router