angularjs - stateprovider - ui router angular 2

Deslice hacia la izquierda/derecha con ui-router angular en el cambio de estado+botón Atrás(para uso móvil)

Question

Uso ui-router angular y ng-animate para una aplicación móvil híbrida. Entonces me gustaría usar transiciones estándar móviles entre pantallas (o estados). Profundizando en la aplicación, desliza-izquierda. Volviendo a subir (con el botón Atrás): deslizar a la derecha. Nada de lujo y trabajando con la ruta ng normal. Sin embargo, esto también debería funcionar con ui-router. De hecho, la izquierda deslizante funciona bien, el problema surge cuando se regresa. Aplica la clase slide-left en el div "original", pero aplica slide-right en la copia o ng-animate div. Esto está causando que las animaciones se "crucen", no son agradables.

Los ejemplos no funcionan en mi caso.

Index.html:

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

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

En mi routes.js: he establecido en la vista abstracta la ng-clase = "diapositiva".

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

en 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();

    };

}]);

Como puede ver, utilizo $ window.history.back () para volver a la pantalla / estado anterior, y si queda la dirección actual, lo configuro a la derecha; de lo contrario, no hago nada. Este controlador principal se agrega en la etiqueta de cuerpo. Esto es lo que ocurre cuando se encuentra en el estado inscripciones.enrollment, y vuelve al estado inscripciones.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">

El problema de ng-class fuera de sincronización fue resuelto por el equipo de ui-enrutador, pero aparentemente estoy haciendo algo mal. Tampoco me gusta mi solución actual para buscar cada clic y navegar más profundamente en la aplicación.

Entonces, ¿cómo puedo usar la diapositiva izquierda / derecha con el botón Atrás y mantener las clases sincronizadas?

Answer 1

Por lo tanto, si desea alguna funcionalidad en su cambio de estado, use modulename.run () donde está usando states, y en modulename.run () puede especificar qué es lo que quiere en el cambio de estado o url de su estado actual.

Supongamos que su módulo es

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

Lo hice lo mejor posible

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

índice html

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

foo html

<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>

bar html

<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>

algunos css

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

Espero que pueda ayudarte