AngularJS:在使用UI-Router时是否可以忽略父级的状态URL?

时间:2015-08-31 11:47:56

标签: angularjs angularjs-routing angular-ui-router angular-ui-router-extras

我正在使用UI-Router(-extras)开发一个AngularJs应用程序,我在其中使用以下设置:

  .state('root', {
    url: '/{language:(?:nl|en)}',
    views: {
      'root': {
        templateUrl: 'app/root/root.html',
        controller: 'RootController'
      }
    }
  })
  .state('root.main', {
    views: {
      'main': {
        templateUrl: 'app/main/main.html',
        controller: 'MainController'
      }
    },
    sticky: true
  })
  .state('root.modal', {
    url: '/{locale:(?:nl|fr)}',
    views: {
      'modal': {
        templateUrl: 'app/modal/modal.html',
        controller: 'ModalController'
      }
    }
  })

根状态定义URL中的语言。此外,我有几个模态和主要状态都有自己的URL(即root.main.home => /en/home)。

现在我想要一些没有URL的模态状态。如何让状态忽略父母的URL?

1 个答案:

答案 0 :(得分:5)

回答:

  

状态如何忽略其父母的URL?

我们有

Absolute Routes (^)

  

如果你想要绝对的url匹配,那么你需要在你的url字符串前加上一个特殊符号'^'。

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });
  

所以路线会变成:

     
      
  • 'contacts'states匹配"/contacts"
  •   
  • 'contacts.list'州匹配"/list"。由于^被使用,因此未合并网址。
  •   

同时检查:how to implement custom routes in angular.js?