UI路由器更改状态而不更改url
有人知道如何在不更改url的情况下更改ui路由器状态吗？如下代码所示；在某些情况下，需要将用户重定向到403或401状态。我希望能够执行此重定向而无需更改url。
问候，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;
}
}
});
问题答案：
将{ 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: '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>
-
有没有可能--在中也这样做？ 我为什么需要这个？让我用一个例子来解释: 创建新类别的路由是，在保存时显示，并且要将路由(23-是新项的id存储在数据库中）
-
问题内容： 当前，我们的项目正在使用default ，而我正在使用此“ hack”来进行更改，而无需重新加载页面： 和在 我想到的替换用筑巢路线，但无法找到这。 有可能吗？ 我为什么需要这个？让我用一个例子来解释： 创建新类别的路线是在SAVE 之后显示的，我想将路线更改为（23-是存储在db中的新项目的id） 问题答案： 只需使用即可代替 。内部调用，但会自动将选项设置为。您可以呼叫和设置。例如
-
问题内容： 的 多重嵌套视图 功能非常好-您可以轻松地从应用程序的一种 状态 跳到另一种 状态 。 有时您可能想更改URL，但有时不需要。我觉得 状态 的概念应该与 route 分开/可选。 这是一个说明我意思的朋克。 这是文档中的一个小工具的分支，下面有2个小更改： 这似乎可行-URL保持不变。同样，这里做了多少多余的工作？这是经过批准/测试的用法吗？ 如果您可以省略某个州的信息，那就太好了。
-
我想改变菜单的状态，当路由改变，但不能使它工作。 我面临的问题是：当我点击Navbar中的链接时。路线改变了，但它不会关闭。当路线更改时，如何更改菜单状态？react-router-redux能帮我吗？ 行动 减速器 组件 子组件
-
在这种情况下，我更改选择元素并调用数据更新方法。该方法从状态获取值。但是当数据更新时，状态还没有改变。当您再次调用数据更新时，状态已经更新了如何正确进行更新？ 反应成分
-
问题内容： 我正在使用ui-router来嵌套状态和视图。当我单击链接时，URL会更改为该子状态的URL，但不会加载模板。 例如，当URL更改为substate时，不会加载相应的模板。 这是Plunkr提供的SSCCE 下面也是我的代码： app.js index.html project.html project.settings.html 问题答案： 首先，将templateurl中的文件名和