Angularjs 在状态更改时使用角度ui路由器向左/向右滑动+；后退按钮（用于移动设备）_Angularjs_Angular Ui Router_Ng Animate

Angularjs 在状态更改时使用角度ui路由器向左/向右滑动+；后退按钮（用于移动设备）

angularjs

Angularjs 在状态更改时使用角度ui路由器向左/向右滑动+；后退按钮（用于移动设备）,angularjs,angular-ui-router,ng-animate,Angularjs,Angular Ui Router,Ng Animate,我使用Angular ui router和ng animate作为混合移动应用程序。所以我想在屏幕（或状态）之间使用移动标准转换。深入应用程序，请向左滑动。返回（使用后退按钮）：向右滑动。没有什么花哨的和正常的ng路线。然而，这也适用于ui路由器。事实上，向左滑动效果很好，返回时会出现问题。它将类幻灯片应用于“原始”div的左侧，但将幻灯片应用于“复制”或“ng动画”div的右侧。这会导致动画“交叉”，这不好这些例子在我的案例中不起作用 Index.html： <div class="

我使用Angular ui router和ng animate作为混合移动应用程序。所以我想在屏幕（或状态）之间使用移动标准转换。深入应用程序，请向左滑动。返回（使用后退按钮）：向右滑动。没有什么花哨的和正常的ng路线。然而，这也适用于ui路由器。事实上，向左滑动效果很好，返回时会出现问题。它将类幻灯片应用于“原始”div的左侧，但将幻灯片应用于“复制”或“ng动画”div的右侧。这会导致动画“交叉”，这不好

这些例子在我的案例中不起作用

Index.html：

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

在my routes.js中：我在抽象视图中设置了ng class=“slide”

如您所见，我使用$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">

ng类不同步的问题是由ui路由器团队提出的，但显然我做错了什么。我也不喜欢我目前的解决办法，每次点击都能在应用程序中导航到更深的地方

因此：如何使用“后退”按钮的左/右滑动来保持类的同步？

因此，如果您想更改状态，可以在使用状态的地方使用modulename.run（），并在modulename.run（）中指定当前状态更改或url更改的所有内容

假设您的模块是

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

var mod=angular.module（'yourModuleName'，['ui.router']）；
mod.config（['$stateProvider'，'$urlRouterProvider'，
函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（“注册”{
摘要：没错，
url:“/tutorProcessEnrollments”，
模板：“”
})
.state（'注册.列表'{
url:“”，
templateUrl:'views/tutorProcessEnrollments.list.html'，
控制器：“TutorEnrollmentsCtrl”
})
.state（'注册.注册'{
url:“/：注册号”，
templateUrl:'views/tutorProcessEnrollments.enrollment.html'，
控制器：“TutorEnrollmentCtrl”
})
}]);
mod.run（函数（$rootScope）{
$rootScope.$on（“$stateChangeStart”），函数（事件、currRoute、prevRoute、拒绝）{
$rootScope.$emit（'cancelTravelerPopupTime'）；
$rootScope.$emit（'closeTravelerInfoPopup'）；
});
});

我已经尽力了

 var myapp = angular.module('myApp', ["ui.router", "ngAnimate", 'hmTouchEvents', 'ngSanitize'])
myapp.config(function($stateProvider, $urlRouterProvider, $animateProvider){   
    $animateProvider.classNameFilter(/ani-/);
    $stateProvider
        .state('anon',{
            template:'<ui-view class="ani-ui-view" ng-class="abstractView"/>',
            abstract:true
        })
        .state("anon.foo", {
            url: "/foo",
            templateUrl : '/views/statechange/resources/partials/foo.html',
            controller : 'fooCtl'
        })
        .state("anon.bar", {
            url: "/bar",
            templateUrl : '/views/statechange/resources/partials/bar.html',
            controller : 'barCtl'
        });

    $urlRouterProvider.otherwise("/foo");
})
.run(function($rootScope){
    $rootScope.$on("$stateChangeStart", function(event, currRoute, prevRoute, rejection) {

    });
})
.animation('.fade-in', function($timeout){
    return {
        enter : function(element, done){
            element.css({
                'opacity':0,
                transition:'all 300ms'
            });
            $timeout(function(){
                element.css({
                    'opacity':1
                });
            },0)
        }
    }
})
.animation('.show-bar', function($timeout) {
    return {
        enter : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(100%, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(0, 0, 0)'
                    });
                },0);

            },
        leave : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(0, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(100%, 0, 0)'
                    });
                },0);
            },

        // you can also capture these animation events
        addClass : function(element, className, done) {},
        removeClass : function(element, className, done) {}
    }
})
.animation('.slide-foo', function($timeout) {
    return {
        enter : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(-100%, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(0, 0, 0)'
                    });
                },0);

            },
        leave : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(0, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(100%, 0, 0)'
                    });
                },0);
            },

        // you can also capture these animation events
        addClass : function(element, className, done) {},
        removeClass : function(element, className, done) {}
    }
})

.controller('mainCtl',[
    '$scope', '$state', '$rootScope', '$window',
    function($scope, $state, $rootScope, $window){
        $rootScope.abstractView = 'fade-in';


        console.log('mainCtl');


    }
])
.controller('fooCtl',[
    '$scope', '$state', '$timeout', '$rootScope',
    function($scope, $state, $timeout, $rootScope){

        $scope.changeState = function(_state){
            $rootScope.abstractView = 'show-bar';
            $state.go('anon.bar');
        }

        $scope.tip="I am foo";
    }
])
 .controller('barCtl',[
    '$scope', '$state', '$stateParams', '$timeout', '$rootScope', '$window',
    function($scope, $state, $stateParams, $timeout, $rootScope, $window){
        $timeout(function(){
            $scope.barshow = true;
        });
        $scope.tip="I am bar";

        $scope.goBack = function($event){
            $rootScope.abstractView = 'show-bar';
            $window.history.back();
        }
    }
]);

我希望它能帮助你

我也有同样的问题，但我只有三个屏幕，但也许经过一些调整，它会达到预期的效果

所以首先要做的是：

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

如果需要应用到更多屏幕上，您可能会以某种方式调整此设置。比如检查路线的深度。

您找到解决方案了吗？我现在面临着类似的障碍。不太感谢，但包含此问题的项目已被搁置。然而，我建议（如果可行的话）用于移动/应用程序项目，我喜欢它！这么多好东西已经内置！请用一些解释详细说明任何答案。仅仅在没有任何文本的情况下发布代码并不能帮助其他人决定您的解决方案是否也能帮助他们，或者您的解决方案与其他解决方案有何不同——想象一下关于这个问题的四个这样的答案：然后所有访问者都必须从视觉上找到差异

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

 var myapp = angular.module('myApp', ["ui.router", "ngAnimate", 'hmTouchEvents', 'ngSanitize'])
myapp.config(function($stateProvider, $urlRouterProvider, $animateProvider){   
    $animateProvider.classNameFilter(/ani-/);
    $stateProvider
        .state('anon',{
            template:'<ui-view class="ani-ui-view" ng-class="abstractView"/>',
            abstract:true
        })
        .state("anon.foo", {
            url: "/foo",
            templateUrl : '/views/statechange/resources/partials/foo.html',
            controller : 'fooCtl'
        })
        .state("anon.bar", {
            url: "/bar",
            templateUrl : '/views/statechange/resources/partials/bar.html',
            controller : 'barCtl'
        });

    $urlRouterProvider.otherwise("/foo");
})
.run(function($rootScope){
    $rootScope.$on("$stateChangeStart", function(event, currRoute, prevRoute, rejection) {

    });
})
.animation('.fade-in', function($timeout){
    return {
        enter : function(element, done){
            element.css({
                'opacity':0,
                transition:'all 300ms'
            });
            $timeout(function(){
                element.css({
                    'opacity':1
                });
            },0)
        }
    }
})
.animation('.show-bar', function($timeout) {
    return {
        enter : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(100%, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(0, 0, 0)'
                    });
                },0);

            },
        leave : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(0, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(100%, 0, 0)'
                    });
                },0);
            },

        // you can also capture these animation events
        addClass : function(element, className, done) {},
        removeClass : function(element, className, done) {}
    }
})
.animation('.slide-foo', function($timeout) {
    return {
        enter : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(-100%, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(0, 0, 0)'
                    });
                },0);

            },
        leave : function(element, done) {
                element.css({
                    transition:'all 300ms',
                    transform:'translate3d(0, 0, 0)'
                });

                $timeout(function(){
                    element.css({
                        transform:'translate3d(100%, 0, 0)'
                    });
                },0);
            },

        // you can also capture these animation events
        addClass : function(element, className, done) {},
        removeClass : function(element, className, done) {}
    }
})

.controller('mainCtl',[
    '$scope', '$state', '$rootScope', '$window',
    function($scope, $state, $rootScope, $window){
        $rootScope.abstractView = 'fade-in';


        console.log('mainCtl');


    }
])
.controller('fooCtl',[
    '$scope', '$state', '$timeout', '$rootScope',
    function($scope, $state, $timeout, $rootScope){

        $scope.changeState = function(_state){
            $rootScope.abstractView = 'show-bar';
            $state.go('anon.bar');
        }

        $scope.tip="I am foo";
    }
])
 .controller('barCtl',[
    '$scope', '$state', '$stateParams', '$timeout', '$rootScope', '$window',
    function($scope, $state, $stateParams, $timeout, $rootScope, $window){
        $timeout(function(){
            $scope.barshow = true;
        });
        $scope.tip="I am bar";

        $scope.goBack = function($event){
            $rootScope.abstractView = 'show-bar';
            $window.history.back();
        }
    }
]);

<body ng-controller="mainCtl">
<div class="ui-view-container">
    <div ui-view></div>        
</div>
</body>

<section ng-controller="fooCtl">
<div class="well">
    {{tip}}
    <div class="text-right">
        <button class="btn btn-default" hm-tap="changeState('anon.bar')">to bar -&gt;</button>
    </div>
</div>

<section ng-controller="barCtl">
<div class="well">
    <div class="text-left">
        <button class="btn btn-info" hm-tap="goBack($event);">&lt;- back</button>
    </div>
    {{tip}}
</div>

.ui-view-container {
        position:relative;
    }
    .ani-ui-view{
        position: absolute;
        left: 0;
        top: 0;
        width:100%;
    }

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

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