UI 路由器在不更改 url 的情况下更改状态
UI-router change state without changing url
有人知道如何在不更改 url 的情况下更改 ui 路由器状态吗?如下面的代码所示;在某些情况下,需要将用户重定向到 403 或 401 状态。我希望能够在不更改 url 的情况下进行此重定向。
问候荷兰皇家银行
// 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>
如果你不想创建函数,你可以将一个对象传递给属性"ui-sref-opts",如下所示:
<a ui-sref="my-page" ui-sref-opts="{location:false}">My Page</a>
以下行(存在于angular-ui-router.js中)显示了允许的属性:
var allowedOptions = ['location', 'inherit', 'reload', 'absolute'];
相关文章:
- jquery在不触发更改事件的情况下切换设置状态
- 是否可以在没有视图状态和回发的情况下使用asp.net web表单
- 在不改变状态的情况下,根据减少器中的给定索引更改嵌套数组值
- 如何在不使用主题或命令式操作的情况下管理状态 在一个简单的 RxJS 示例中
- 如何在禁用 JavaScript 的情况下维护下拉列表的持久性状态 - PHP
- 在不触发状态更改的情况下更新 URL
- 是否可以在不导致单击事件的情况下更改复选框状态
- 画布绘制 - 在不清除旧状态的情况下更改旋转轴
- UI 路由器在不更改 url 的情况下更改状态
- Jquery 序列化 :尝试在不提交表单的情况下将表单状态传递给 ASP.NET MVC 控制器
- 在不使用状态/属性的情况下与父组件通信
- 角度 UI 路由器 - 在没有参数的情况下从一个状态转换到同一状态失败
- 是否可以在不让他们安装应用程序的情况下更新用户的 facebook 状态
- 如何在没有闭包的情况下对共享状态进行编程
- 如何在应用所有样式并删除javascript的情况下捕获运行时html内容/状态
- Knockout模板在某些情况下保持加载状态
- 如果用户在不按登出的情况下关闭浏览器,如何使其处于脱机状态
- 在不改变整个状态的情况下改变state数组(REACT / REDUX)
- 如何在不将状态传递给子组件的情况下更新状态
- FP:在没有实际状态变化的情况下反映状态