大佬教程收集整理的这篇文章主要介绍了angularjs – 在角度ui-router上向左/向右滑动状态改变后退按钮(用于移动设备)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
那些例子在我的案例中没有用.
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 =“slide”.
$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,但显然我做错了.
我也不喜欢我当前的解决方法来获取每次点击以在应用程序中更深入地导航.
那么：我如何使用向后/向右滑动和后退按钮并使类保持同步？
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)'
});
$timeout(function(){
element.css({
transform:'translate3d(0,0)'
});
},0);
},leave : function(element,transform:'translate3d(0,0)'
});
$timeout(function(){
element.css({
transform:'translate3d(100%,0);
},// you can also capture these animation events
addClass : function(element,className,donE) {},removeClass : function(element,donE) {}
}
})
.animation('.slide-foo',transform:'translate3d(-100%,donE) {}
}
})
.controller('mainCtl',[
'$scope',function($scope,$state,$window){
$rootScope.abstractView = 'fade-in';
console.log('mainCtl');
}
])
.controller('fooCtl','$timeout',$timeout,$rootScopE){
$scope.changeState = function(_statE){
$rootScope.abstractView = 'show-bar';
$state.go('anon.bar');
}
$scope.tip="I am foo";
}
])
.controller('barCtl','$stateParams',$stateParams,$window){
$timeout(function(){
$scope.barshow = true;
});
$scope.tip="I am bar";
$scope.goBACk = function($event){
$rootScope.abstractView = 'show-bar';
$window.history.BACk();
}
}
]);
索引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>
吧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>
一些css
.ui-view-container { position:relative; } .ani-ui-view{ position: absolute; left: 0; top: 0; width:100%; }
我希望它可以帮到你
以上是大佬教程为你收集整理的angularjs – 在角度ui-router上向左/向右滑动状态改变后退按钮(用于移动设备)全部内容，希望文章能够帮你解决angularjs – 在角度ui-router上向左/向右滑动状态改变后退按钮(用于移动设备)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。