需要捕捉ui.router国家和它的URL时，URL变化 [英] Need to catch ui.router state and its url when the url changes

问题描述

我要附加一个监听器URL我在AngularJS应用程序使用 ui.router 模块中的变化，因为我需要获得新的状态和网​​址当URL变化。为了定制URL更改侦听器，我已经做以下，但它不工作（还）：

I wish to attach a listener to URL changes in the ui.router module I use in an AngularJS app, because I need to get the new state and its url when the url changes. In order to customize the url change listener, I've done the following, but it's not working (yet):

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

in the config section of ui.router, I added this line:

$urlRouterProvider.deferIntercept();

和配置（）之后，我有以下code，希望cactch的ui.router的状态和它的URL

and after the config(), I have the following code, hoping to cactch the ui.router's state and its 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做。或者有更简单的方法来获得状态和网​​址？

推荐答案

我不是100％肯定的是背后的真正需求。但随着UI的路由器，我们应该用 $ stateChangeStart 事件中，我会说。

I am not 100% sure what is the real requirement behind. But with UI-Router, we should use $stateChangeStart event I'd say.

有是一个例子，一个工作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())
});

检查一下这里

的 $ urlRouter 和 .deferIntercept（）和。听（）或者在 .RUN（）阶段宣告状态的更多有用

The $urlRouter and its .deferIntercept() and .listen() or more useful for declaring states in a .run() phase

// 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();
  }
]);

这篇关于需要捕捉ui.router国家和它的URL时，URL变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！