Question

我希望在AngularJS应用中使用ui.router模块中的网址更改附加一个监听器，因为我需要在网址更改时获取new state及其url。为了自定义网址更改监听器，我已完成以下操作，但它尚未正常工作：

在ui.router的配置部分，我添加了这一行：

$urlRouterProvider.deferIntercept();

在config（）之后，我有以下代码，希望能够实现ui.router的状态及其URL

config(
//ui.router's config ommitted....
).run(function($rootScope, $urlRouter) {
    $rootScope.$on('$locationChangeSuccess', function(e) {
          console.log(e);

          e.preventDefault(); //prevent the default handler
          $urlRouter.sync(); //once the interception is done, sync the current url
         $urlRouter.listen();
    })
});

我不确定这是否可以使用ui.router。或者有一种更简单的方法来获取state及其url？

Answer 1

我不是100％确定背后的真正要求是什么。但是使用UI-Router，我们应该使用$stateChangeStart事件来说明。

有an example, a working plunker

$rootScope.$on('$stateChangeStart', function (event, toState,   toParams
                                                   , fromState, fromParams) 
{
  console.log(event)
  console.log(toState)
  console.log(toParams)
  console.log(fromState)
  console.log(fromParams)
  console.log(toState)
  console.log($location.url())
});

检查here

$urlRouter及其.deferIntercept()和.listen()或更多用于在.run()阶段声明状态

// config
.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

      $stateProviderRef = $stateProvider; 

      $urlRouterProvider.otherwise('/home');
      $urlRouterProvider.deferIntercept();

// run
.run(['$rootScope', '$urlRouter',
  function($rootScope, $urlRouter) {    

    $stateProviderRef
      .state('home', {
        url: "/home",
        templateUrl: 'tpl.html',
      })
    $urlRouter.listen();
  }
]);

当url发生变化时，需要捕获ui.router状态及其url

1 个答案: