Question

我使用Angular ui-router和ng-animate作为混合移动应用。所以我想在屏幕（或状态）之间使用移动标准转换。深入了解应用程序，向左滑动。返回（使用后退按钮）：向右滑动。没有什么花哨的东西和正常的ng-route一起工作。但是，这也适用于ui-router。实际上，左侧滑动工作正常，返回时会出现问题。它适用于＆＃34;原版＆＃34; div，但在副本或ng-animate div上应用向右滑动。这导致动画“交叉”，而不是很好。

那些例子在我的案例中没有用。

的index.html：

<div class="container">
    <div ui-view class="view"></div>
</div>

在main.css中：

.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
    position: absolute;
    top: 0px; right: 0; bottom: 0; left: 0;
    overflow-x: hidden;
    background: inherit;
    -ms-transition: 5.5s ease-in-out;
    -webkit-transition: 5.5s ease-in-out;
    transition:  5.5s ease-in-out;
}


.slide-left.ng-enter {
    z-index: 100;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.slide-left.ng-enter.ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide-left.ng-leave {
    z-index: 101;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide-left.ng-leave.ng-leave-active {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide-right.ng-enter {
    z-index: 101;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide-right.ng-enter.ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide-right.ng-leave {
    z-index: 100;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide-right.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

在我的routes.js中：我在抽象视图中设置了ng-class =＆＃34; slide＆＃34;。

 $stateProvider
        .state('enrollments', {
            abstract: true,
            url: '/tutorProcessEnrollments',
            template: '<div class="scroller" ui-view ng-class="slide" ></div>'
        })
        .state('enrollments.list', {
            url: '',
            templateUrl: 'views/tutorProcessEnrollments.list.html',
            controller: 'TutorEnrollmentsCtrl'
        })
        .state('enrollments.enrollment', {
            url: '/:enrollment_id',
            templateUrl: 'views/tutorProcessEnrollments.enrollment.html',
            controller: 'TutorEnrollmentCtrl'
        })

在App.js中

.controller('MainCtrl', ['$scope', '$rootScope', '$window', '$location', '$state', function ($scope, $rootScope, $window, $location, $state) {

    $scope.slide = 'slide-left';

    // Implement own state.goTo functionality, to set the slide-left default on every menu action.
    $rootScope.goTo = function (route, param) {
        $scope.slide = 'slide-left';

        $state.go(route, param);
    };


    // Function for going back in the history. The back button is hidden on items where no sub items/states\ are available.
    $rootScope.back = function () {
        if ($scope.slide === 'slide-left') {

            $scope.slide = 'slide-right';

        }

        $window.history.back();

    };

}]);

如您所见，我使用$ window.history.back（）导航回上一个屏幕/状态，如果剩下当前方向，我将其设置为右，否则，我不会做任何事。此主控制器添加在Body标签中。这是在enrollments.enrollment状态下发生的情况，并返回到enrollments.list状态。

<div class="scroller ng-scope slide-left ng-animate ng-enter ng-enter-active" ui-view="" ng-class="slide" style=""><div ng-model="enrollment" class="ng-scope ng-pristine ng-valid">
<div class="scroller ng-scope slide-right ng-animate ng-enter ng-enter-active" ui-view="" ng-class="slide" style=""><div ng-model="enrollment" class="ng-scope ng-pristine ng-valid">

ui-router团队导致ng-class不同步的问题是solved，但显然我做错了。我也不喜欢我当前的解决方法来获取每次点击以在应用程序中更深入地导航。

那么：如何使用后退按钮左/右滑动并保持类同步？

Answer 1

因此，如果您想要更改州的某些功能，可以使用 modulename.run（）使用状态，在 modulename.run（）中，您可以使用在当前状态变化或网址更改中指定您想要的内容。

假设您的模块是

var mod = angular.module('yourModuleName', ['ui.router']);
mod.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider,$urlRouterProvider){
$stateProvider
        .state('enrollments', {
            abstract: true,
            url: '/tutorProcessEnrollments',
            template: '<div class="scroller" ui-view ng-class="slide" ></div>'
        })
        .state('enrollments.list', {
            url: '',
            templateUrl: 'views/tutorProcessEnrollments.list.html',
            controller: 'TutorEnrollmentsCtrl'
        })
        .state('enrollments.enrollment', {
            url: '/:enrollment_id',
            templateUrl: 'views/tutorProcessEnrollments.enrollment.html',
            controller: 'TutorEnrollmentCtrl'
        })
}]);
mod.run(function($rootScope) {
        $rootScope.$on("$stateChangeStart", function(event, currRoute, prevRoute, rejection) {
            $rootScope.$emit('cancelTravellerPopUpTimer');
            $rootScope.$emit('closeTravellerInfoPopup');
        });
    });

Answer 2

我遇到了同样的问题，但是我只有三个屏幕，但是也许稍作调整就会达到预期的效果。

那么首先要做的是

<span ng-class="navReverse ? 'navleft' : 'navright'">
  <div ui-view="nav"></div>
</span>

您必须在ui视图之前添加ng-class。否则，它将使用当前类而不是所需的类添加新模板。

然后，您可以在父控制器中定义转换逻辑。对我来说，这就像：

$transitions.onCreate({}, function($transition) {
    if ($transition.$from().name == 'a' && $transition.$to().name == 'a.b') {
      $scope.navReverse = false;
    }
    if ($transition.$from().name == 'b' && $transition.$to().name == 'a') {
      $scope.navReverse = true;
    }
}

如果需要将其应用于更多屏幕，则可以以某种方式进行调整。就像检查路线的深度。

使用角度ui-router打开左/右滑动状态更改+后退按钮（用于移动设备）

2 个答案: