Javascript AngularJS摘要周期有时无法更新范围

有棱角的开发人员

我在一起使用ngAnimate和UI路由器时遇到了一点问题。基本上，我有五个子状态（“幻灯片”），它们构成了我的主要内容，每侧都有一个按钮。单击时，这些按钮分别转到上一张幻灯片和下一张幻灯片

我正在使用CSS3翻译为幻灯片的进入和退出设置动画。当用户单击左侧按钮时，当前幻灯片向右退出，“上一张”幻灯片从左侧进入。单击右按钮时，情况正好相反：当前幻灯片从左侧退出，“下一张”幻灯片从右侧进入。这些幻灯片循环播放，所以幻灯片0转到幻灯片4，反之亦然

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

代码分为几个元素：

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

指令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 );
        }

        // ...
    };
});

相关控制器代码：

<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 );
        }

        // ...
    };
});

相关服务代码：

<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”类和“right”类都不存在，因此第一个幻灯片转换在页面加载时无法设置动画。类似地，切换方向（即向左两次，然后向右一次）会使幻灯片从错误的一侧显示，因为上一个动画的“左”/“右”类仍在元素上

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

我经历了很多代码迭代，我当前的实现依赖于$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();
    });
};

我有两个问题。首先，它冒犯了我的感情——我觉得它比它需要的复杂得多。第二，它在所有时间都不起作用。有时有效，有时无效。我不知道它为什么失败

你们觉得怎么样？如果你能想出更好的解决方案，或者你能找出我的解决方案偶尔失败的原因，请告诉我！谢谢你抽出时间

---

哦，最后一件事——我对AngularJS还相当陌生，所以请随意给出关于代码结构或方法的建议

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

我被迫实施了一个解决方案，该解决方案感觉明显没有那么“棱角分明”，但在100%的时间里都有效

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

例如：

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

---

然后触发适当的状态转换就变得很简单了。

为什么

$scope.$apply（）

包装成

$timeout

有什么原因吗？最初的ng click事件触发了一个摘要循环，但“left”/“right”类在那一点上还没有准备好，所以我在准备好时调用$scope.$apply（）。不幸的是，初始摘要周期将阻止$scope.$apply（）启动新的摘要周期，因此我需要在回调/承诺中实现它。根据文档，当前摘要周期结束后，将立即运行延迟为0的$timeout。另外，我禁用了$timeout apply包装（第三个参数，false），因为我无法让它以其他方式工作try

var promise=$scope.$evalAsync（函数（）{slideService.prepareNextSlide（）；}）$evalAsync没有返回承诺，因此我必须保留$timeout。我刚刚用$scope.$evalAsync替换了$scope.$apply。看起来它100%的时间都在工作——我会在更多的测试后发回。我忍不住想知道是否还有其他解决方案不同时依赖于$timeout（禁用$apply包装）和$evalAsync。@pankajparkar让我再做一些测试。我会让你知道它是否100%有效。