javascript - ui-router deferIntercept和状态参数

我使用ui-router的新deferIntercept()来更新浏览器网址，而无需重新加载
我的 Controller :

$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
  e.preventDefault();
  if ($state.current.name !== 'search') {
    $urlRouter.sync();
  }
  $urlRouter.listen();
});

使用此代码，单击浏览器的后退按钮会将URL更改为上一个，但是我无法更新 Controller 状态以反射(reflect)此更改。
$ stateParams仍包含用户首次加载页面时设置的值。

当用户单击“后退”按钮或手动更改URL时，更新 Controller 内的$ 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();

来源: official documentation for $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();
});

关于javascript - ui-router deferIntercept和状态参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25530322/