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

Rem*_*emq 2 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'
      }
    }
  })
Run Code Online (Sandbox Code Playgroud)

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

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

Rad*_*ler 5

回答:

一个州如何忽略他父母的URL?

我们有

绝对路线(^)

如果您想要绝对URL匹配,那么您需要在url字符串前面加上特殊符号'^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });
Run Code Online (Sandbox Code Playgroud)

所以路线将成为:

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

还要检查一下:如何在angular.js中实现自定义路由?