角度ui路由器父网址设置为/ [英] angular ui-router parent url set to /

问题描述

使用ui-router并将父状态URL设置为/时，在查看子页面时，我的URL看起来像localhost:8000/#//child.我只想在散列和子项之间添加一个/.

Using ui-router and setting the parent state url to / results in my url looking like localhost:8000/#//child when looking at a child page. I'd like just a single / between the hash and child.

我尝试将父状态url留为空白，但是使用锚链接时，ui-sref不会链接回父状态.有人有一个使用根级别未命名父URL的解决方案吗?

I tried leaving the parent state url blank, but then ui-sref won't link back to the parent state when using an anchor link. Anybody got a solution for having a root level un-named parent url?

app.config

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");

$stateProvider
  .state("main", {
    url: "/",
    templateUrl: 'sites/main/main.html',
    controller : 'MainController',
    resolve: {
      items: function(srvMenu) {
          return srvMenu.getNav();
      }
  }

 })

});

child.config

emergency.config(function($stateProvider) { 
$stateProvider
    .state("main.emergency", {
      url: "/emergency",
      templateUrl: 'sites/emergency/emergency_menu.html',
      controller : 'EmenuController',
      resolve: {
          emenu: function(srvEmergency) {
              return srvEmergency.getMenu();
          }
      }

    })

    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'sites/emergency/emergency_detail.html',
    })
});

推荐答案

ui-router具有针对所有问题的解决方案(几乎).有一个有效的 plunker .我们将实际使用的功能称为:绝对路线(^)

The ui-router has solution (almost) for anything. There is a working plunker. The feature we will se in action is called: Absolute Routes (^)

因此，让我们从要求开始，获取以下URL路由:

So, let's start with requirement, to have these URL routes:

domain/#/                             -- root for main
domain/#/emergency/                   -- main.emergency
domain/#/emergency/detail             -- main.emergency.detail

在使用以下ui-sref状态调用时应该工作:

Which should be working when using this ui-sref state calls:

<ul>
    <li><a ui-sref="main">Main</a></li>
    <li><a ui-sref="main.emergency">Emergency</a></li>
    <li><a ui-sref="main.emergency.detail">Detail</a></li>
</ul> 

现在，诀窍是:

• 根(第一)状态必须使用url: "/"，以具有一些唯一标识
• 但是下一个状态可以再次从根开始定义:使用此设置:
  url: "^/..."

• the root (first) state must use url: "/", to have some unique identification
• but the next state can start its definition from the root again: with this setting:
  url: "^/..."

这里是状​​态配置，可以实现预期的结果

Here is the state configuration, enabling the desired results

  $stateProvider
    // root with '/'
    .state("main", {
      url: "/",
      templateUrl: 'main.tpl.html',
    })
    // here we start again from the root '/emergency'
    .state("main.emergency", {
      url: "^/emergency",
      templateUrl: 'emergency_menu.tpl.html',
    })
    // parent and child '/emergency/detail
    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'emergency_detail.tpl.html',
    });

这是文档:

...和正常工作的 plunker ...

...and the working plunker...

这篇关于角度ui路由器父网址设置为/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！