ui路由器deferIntercept和状态参数
ui-router deferIntercept and state params
我使用ui路由器的新deferIntercept()来更新浏览器url,而不需要重新加载我的控制器:
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
e.preventDefault();
if ($state.current.name !== 'search') {
$urlRouter.sync();
}
$urlRouter.listen();
});
使用此代码,单击浏览器的后退按钮会将URL更改为上一个,但我无法更新控制器状态以反映此更改。$stateParams仍然包含用户首次加载页面时设置的值。
当用户单击后退按钮或手动更改URL时,更新控制器内的$state和$stateParams对象的最佳方法是什么?
谢谢!
对$urlRouter.listen()
的调用应该放在事件处理程序之外。您提供的代码片段应更改为:
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
e.preventDefault();
if ($state.current.name !== 'search') {
$urlRouter.sync();
}
});
// Moved out of listener function
$urlRouter.listen();
来源:$urlRouter
的官方文档提供了deferIntercept
方法的代码示例。它将对$urlRouter.listen()
的调用置于侦听器函数之外:
var app = angular.module('app', ['ui.router.router']);
app.config(function ($urlRouterProvider) {
// Prevent $urlRouter from automatically intercepting URL changes;
// this allows you to configure custom behavior in between
// location changes and route synchronization:
$urlRouterProvider.deferIntercept();
}).run(function ($rootScope, $urlRouter, UserService) {
$rootScope.$on('$locationChangeSuccess', function(e) {
// UserService is an example service for managing user state
if (UserService.isLoggedIn()) return;
// Prevent $urlRouter's default handler from firing
e.preventDefault();
UserService.handleLogin().then(function() {
// Once the user has logged in, sync the current URL
// to the router:
$urlRouter.sync();
});
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.listen();
});
相关文章:
- 删除处于抽象状态的参数angular
- 使用应用程序状态js和视图在angular js url上传递两个参数
- angularjs-ui路由器父状态,参数加载在子状态之后
- Angularjs-ui路由器使用不同的参数进入相同的状态
- 否则用于具有类型化参数的状态
- 使用状态参数转换到不同的状态
- 如何将参数传递到 UI 路由器状态的模式窗口
- 如何同步Redux状态和url哈希标记参数
- 如何获取 ui 路由器状态参数
- 如何通过串联在视图中构造 AngularJS 状态参数
- 将状态参数传递给状态提供程序中设置的控制器
- 使用Angular ui路由器基于状态参数的负载控制器
- 如何在Aurelia路由器中定义状态参数
- 如何自动注入状态参数
- ui路由器deferIntercept和状态参数
- AngularJS将状态参数传递给data字段
- 重新加载页面时无法识别状态参数的Ui-router状态
- 如何在转换中获取下一个状态参数
- 如何在ui-router中持久化浏览器上的可选状态参数
- 在$urlRouterProvider (UI-Router)中插入子状态参数