【问题标题】:AngularJS: Is it possible to ignore parent's state url while using UI-Router?AngularJS:使用 UI-Router 时是否可以忽略父母的状态 url?
【发布时间】:2015-11-25 10:42:16
【问题描述】:

我正在使用 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?

【问题讨论】:

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


    【解决方案1】:

    回答:

    一个州怎么能忽略他父母的 URL?

    我们有

    Absolute Routes (^)

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

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

    所以路线会变成:

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

    还要检查这个:how to implement custom routes in angular.js?

    【讨论】:

    • 感谢您的快速回复。但是,我知道使用“^”的绝对路由。我正在寻找的东西根本没有 URL。当状态不继承 URL 时,可以在保留前一页的 URL 的同时激活它。是否有可能在从父母那里继承时得到它? (即当我从家/欢迎到另一个州时,URL 应该保持不变)
    • 不确定你真正想要什么,因为在刷新时,用户将被重定向到不同的页面。但是如果你想导航到不同的状态,同时保持不同的状态的网址......你可以检查这个:How not to change url when show 404 error page with ui-router
    • 唯一的概念(带有空 url)旨在用于子状态 (重要的是子状态不是先前的) - 我们还让该子状态被预选默认...
    • 我制作的菜单位于模态框内。我不希望菜单有自己的 URL,而其他一些模式确实需要一个。我通过使用 ng-click 事件而不是 ui-sref 找到了当前修复: $state.go('root.modal.menu', {}, {location: false});我将按照您的链接中的建议查看 $urlRouterProvider ,看看我是否可以捕获到菜单(和其他一些状态)的所有重定向,以便我可以再次使用 ui-sref。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-23
    • 1970-01-01
    相关资源
    最近更新 更多