0

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

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

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

然后在运行时，我正在监听$stateChangeStart从 ui-router 广播的内容：

$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 中指定的转换正确。

为了使其完美运行（包括第一次导航），我唯一能做的就是在我的条件块 on 之后强制$rootScopeto 。完整代码如下：$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角度错误参考）

相关库的版本是：

  • AngularJS v1.3.2
  • UI-路由器 v0.3.1
  • 角动画 v1.3.2
4

0 回答 0