Question

我正在尝试使用带有可变参数的路由，这样我就可以使用参数来检查要解决的状态。我做了一个简化的plunker，它展示了我想要做的事情。问题是目标路线的控制器似乎没有启动。然而，结果已经完成。

以下是代码，下面是plunker的链接：

var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function($stateProvider, $urlRouterProvider) {


  $stateProvider
    .state('default', {
      url: "/welcome",
      templateUrl: "def.html"
    })
    .state('redirect', {
      url: "/{param1}/{param2}",
      params: {
        param1: {
          value: 'foo'
        },
        param2: {
          value: 'bar'
        }
      },
      template: '<ui-view></ui-view>'
    })
    .state('redirect.first', {
      templateUrl: "route1.html"
    })
    .state('redirect.second', {
      templateUrl: "route2.html",
      controller: function() {
        console.log('in controller');
      },
      resolve: {
        test: function($stateParams) {
          console.log($stateParams);
          return 'test';
        }
      }
    });


  $urlRouterProvider.otherwise('/');
})

.run(function($rootScope, $injector) {

  var $state = $injector.get('$state');

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    console.log('entering state change start');
    if (toState.name == 'redirect') {
      $state.transitionTo('redirect.second', toParams, {
        location: true,
        inherit: true,
        reload: true,
        notify: true
      });
    }
  });
});

http://plnkr.co/edit/3n5D3Q3i5XHRw38WFdz3?p=preview

Answer 1

我们需要的是通过 event.preventDefault(); 停止默认导航（此处已更新plunker）

$rootScope.$on('$stateChangeStart', function(event, toState,   toParams
                                                  , fromState, fromParams){    
    if(toState.name == 'redirect'){
        // HERE
        // the default must be stop, to redirect...
        event.preventDefault();
        $state.transitionTo('redirect.second', toParams
             , { location:true, inherit:true, reload:true, notify:true });
    }
});

检查here

同时检查$urlRouter.sync()

Answer 2

您需要使用ui-sref="redirect.first"语法而不是href="/"

以下是工作示例：http://plnkr.co/edit/wEU5RbCsp3LpeUHbKTo9?p=preview

transitionTo的UI路由器问题

2 个答案: