在不改变网址UI路由器改变状态 [英] UI-router change state without changing url
本文介绍了在不改变网址UI路由器改变状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有人知道如何更改UI路由器状态不改变网址？ 。如下图code;在某些情况下，用户需要被重定向到403或401的状态。我希望能够做到这一点重定向不改变的URL。
问候，
klmdb
//确保authGetCurrent已经路由开始前跑
$ rootScope。在$（$ locationChangeSuccess功能（事件，旁边）{ 。事件preventDefault（）; AuthService.loadCurrentAuth（）。然后（函数（）{ $ urlRouter.sync（）;
}，函数（）{ 的console.log（大错误!!!）;
}）;
}）;
//配置$ urlRouter的听众* *后您的自定义监听器
$ urlRouter.listen（）;
$ rootScope。在$（$ stateChangeStart功能（事件，toState，toParams，fromState，fromParams）{ VAR requiredLogin =（toState和放大器;＆安培; toState.data toState.data.requiredLogin：假的），
requiredGroupRights =（toState和放大器;＆安培; toState.data toState.data.requiredGroupRights：假）; //需要用户有这些权利的至少一个当前组中 如果（requiredLogin＆放大器;＆放大器;！AuthService.isLoggedIn（））{ 。事件preventDefault（）;
$ state.transitionTo（'401'）;
返回;
}
如果（requiredGroupRights）{ VAR我，
hasRight = FALSE;
对于（i = 0; I＆LT; requiredGroupRights.length;我++）{ 如果（GroupService.checkGroupRights（toParams.groupId，requiredGroupRights [I]））{
hasRight = TRUE;
打破;
}
} 如果（！hasRight）{ 。事件preventDefault（）;
$ state.transitionTo（'403'）;
返回;
} }}）;
解决方案
通过 {位置：假} 选项$ state.go
$ state.go（home.foo，{}，{位置：假}）;
看到它在行动：<一href=\"http://plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=$p$pview\">http://plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=$p$pview
VAR应用= angular.module（'demonstrateissue'，['ui.router']）;的app.config（函数（$ stateProvider，$ urlRouterProvider）{
$ urlRouterProvider.otherwise（/家庭）;
$ stateProvider.state（{
名称：'家'，
网址：'/家，
控制器：功能（）{}，
模板：'＆LT; H1＆GT;家庭和LT; / H1＆GT;＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;'}
）;
$ stateProvider.state（{
名称：'home.foo'，
网址：'/富'，
控制器：功能（）{}，
模板：'＆LT; H1＆GT;富＆LT; / H1＆GT;'}
）;
}）;//添加状态变化挂钩;日志控制台。
app.run（函数（$ rootScope，$状态，$位置）{
$ rootScope $状态= $状态。
$ rootScope $位置= $位置。 //这个函数会去home.foo状态，但不能更改网址
$ rootScope.gotofoo =功能（）{
$ state.go（home.foo，{}，{位置：假}）;
};
}）;
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述;脚本数据需要=angular.js@*数据semver =1.2.25SRC =的https：//$c$c.angularjs.org/1.2.25/angular.js＆GT;＆下; / SCRIPT＆GT;
＆所述;脚本数据需要=UI-路由器@ *数据semver =0.2.13SRC =https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular- UI-router.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;机身NG-应用=demonstrateissue＆GT; ＆LT;格UI的视图＆gt; / DIV＆GT; ＆LT; DIV CLASS =头＆GT;
当前网址：＆LT; B＆GT; {{$ location.url（）}}＆LT; / B＆GT; ＆LT; BR＆GT;
现状：其中，B＆GT; {{$ state.current.name}}＆LT; / B＆GT; ＆LT; BR＆GT;
当前PARAMS：其中，B＆GT; {{$ state.params | JSON}}＆LT; / B＆GT;＆LT; BR＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 单击此 - ＆GT;
＆LT; A HREF NG点击=gotofoo（）＆GT;去到foo不改变网址＆LT; / A＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
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路由器改变状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
