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) (2)
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?
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'');
});
});
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 -></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);"><- 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