Question

我正在尝试使用ui-router和ngAnimate实现滑动左/右滑动效果（如在应用中导航流）。

为了达到这个效果，我在ui-view元素的容器上添加了一个css类，如下所示：

<div class="ui-view-container" ng-class="navigationDirection">
    @RenderBody()
</div>

然后在运行中，我正在听取从ui-router广播的$stateChangeStart：

$rootScope.$on('$stateChangeStart', (event, to, toParams, from, fromParams) => {
    // Determine if the navigation is back in the flow and set the correct navigation direction
    // on the rootScope which is applied to the ui-view-container for the transition
    if (typeof from.params !== 'undefined' && typeof from.params.backState !== 'undefined' && to.name === from.params.backState.name) {
        $rootScope.navigationDirection = "back";
    } else {
        $rootScope.navigationDirection = "forward";
    }
});

问题是我的代码不适用于输入的第一个状态（ng-enter）。然而，在第一个状态之后，前后导航的切换工作完美。 ng-enter，ng-enter-active，ng-leave和ng-leave-active都在我的css中使用指定的转换正确设置。

我唯一能让它完美运行（包括第一次导航）的方法是在$rootScope上的条件阻止后强制$apply()到$stateChangeStart。完整代码如下：

$rootScope.$on('$stateChangeStart', (event, to, toParams, from, fromParams) => {
    // Determine if the navigation is back in the flow and set the correct navigation direction
    // on the rootScope which is applied to the ui-view-container for the transition
    if (typeof from.params !== 'undefined' && typeof from.params.backState !== 'undefined' && to.name === from.params.backState.name) {
        $rootScope.navigationDirection = "back";
    } else {
        $rootScope.navigationDirection = "forward";
    }
    $rootScope.$apply();
});

该应用程序运行正常，但我收到错误消息：$apply already in progress（Angular error reference）

$ rootScope似乎在异步调用中更新速度太慢

0 个答案: