UI路由器更改状态而不更改url [英] UI-router change state without changing url
本文介绍了UI路由器更改状态而不更改url的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有谁知道如何在不更改 url 的情况下更改 ui-router 状态?正如下面的代码所示；在某些情况下，用户需要重定向到 403 或 401 状态.我希望能够在不更改 url 的情况下执行此重定向.
问候，klmdb
//在路由开始前确保 authGetCurrent 已经运行$rootScope.$on("$locationChangeSuccess", function(event, next) {event.preventDefault();AuthService.loadCurrentAuth().then(function(){$urlRouter.sync();}， 功能(){console.log("大错误！！！");});});//在自定义监听器之后*配置 $urlRouter 的监听器$urlRouter.listen();$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {var requiredLogin = (toState && toState.data ? toState.data.requiredLogin : false ),requiredGroupRights = (toState && toState.data ? toState.data.requiredGroupRights : false );//要求用户在当前组中至少拥有这些权限之一if (requiredLogin && !AuthService.isLoggedIn()) {event.preventDefault();$state.transitionTo('401');返回;}if(requiredGroupRights){变量 i，hasRight = 假；for(i=0;i 解决方案
将 { location: false } 选项传递给 $state.go
$state.go("home.foo", {}, { location: false } );查看实际效果:http://plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=preview
var app = angular.module('demonstrateissue', ['ui.router']);app.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise("/home");$stateProvider.state({name: '家',网址:'/家'，控制器:函数(){}，模板:'<h1>首页</h1><div ui-view></div>'});$stateProvider.state({名称:'home.foo',网址:'/foo'，控制器:函数(){}，模板:'<h1>foo</h1>'});});//添加状态改变钩子；记录到控制台.app.run(function($rootScope, $state, $location) {$rootScope.$state = $state;$rootScope.$location = $location;//该函数将进入 home.foo 状态但不改变 url$rootScope.gotofoo = function() {$state.go("home.foo", {}, { location: false } );};});<头><script data-require="angular.js@*" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script><script data-require="ui-router@*" data-semver="0.2.13" src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script><body ng-app="demonstrateissue"><div ui-view>/div><div class="header">当前网址:<b>{{$location.url() }}</b><br>当前状态:<b>{{$state.current.name }}</b><br>当前参数:<b>{{$state.params |json }}</b><br><!-- 点击这里--><a href ng-click="gotofoo()">转到 foo 不要更改 url</a></html>
Does anybody know how to change the ui-router state without changing the url? As the code below shows; in some cases the user needs to be redirected to 403 or 401 states. I would like to be able to do this redirect without changing the url.
Regards, klmdb
// make sure authGetCurrent has ran before routing starts
$rootScope.$on("$locationChangeSuccess", function(event, next) {
event.preventDefault();
AuthService.loadCurrentAuth().then(function(){
$urlRouter.sync();
}, function(){
console.log("BIG ERROR!!!");
});
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.listen();
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
var requiredLogin = (toState && toState.data ? toState.data.requiredLogin : false ),
requiredGroupRights = (toState && toState.data ? toState.data.requiredGroupRights : false ); // require the user to have at least one of these rights in the current group
if (requiredLogin && !AuthService.isLoggedIn()) {
event.preventDefault();
$state.transitionTo('401');
return;
}
if(requiredGroupRights){
var i,
hasRight = false;
for(i=0;i<requiredGroupRights.length;i++){
if(GroupService.checkGroupRights(toParams.groupId, requiredGroupRights[i])){
hasRight = true;
break;
}
}
if(!hasRight){
event.preventDefault();
$state.transitionTo('403');
return;
}
}
});
解决方案
Pass the { location: false } option to $state.go
$state.go("home.foo", {}, { location: false } );
See it in action: http://plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=preview
var app = angular.module('demonstrateissue', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider.state({
name: 'home',
url: '/home',
controller: function() { },
template: '<h1>Home</h1><div ui-view></div>'}
);
$stateProvider.state({
name: 'home.foo',
url: '/foo',
controller: function() { },
template: '<h1>foo</h1>'}
);
});
// Adds state change hooks; logs to console.
app.run(function($rootScope, $state, $location) {
$rootScope.$state = $state;
$rootScope.$location = $location;
// This function will go to home.foo state but not change url
$rootScope.gotofoo = function() {
$state.go("home.foo", {}, { location: false } );
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.13" src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
</head>
<body ng-app="demonstrateissue">
<div ui-view>/div>
<div class="header">
Current URL: <b>{{$location.url() }}</b> <br>
Current State: <b>{{$state.current.name }}</b> <br>
Current Params: <b>{{$state.params | json }}</b><br>
</div>
<!-- click this -->
<a href ng-click="gotofoo()">Go to foo dont change url</a>
</body>
</html>
这篇关于UI路由器更改状态而不更改url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
