Question

当我使用Bootstrap选项卡时，链接会自动重定向到主页，如其他选项中所述。我认为这是因为标签中的href中的哈希标记。

标签

if

JS

else

主菜单链接

<ul class="tab-nav" role="tablist" data-tab-color="red" tabindex="7" style="overflow: hidden; outline: none;">
       <li class=""><a href="#home2" role="tab" data-toggle="tab" aria-expanded="false">Home</a></li>
       <li role="presentation" class=""><a href="#profile2" role="tab" data-toggle="tab" aria-expanded="false">Profile</a></li>
</ul>

我正在使用纯Bootstrap NOT角度引导程序模块。如何通过阻止额外的哈希标记来解决这个问题？我指的是当$ changeProvider

中没有声明的URL更改时如何防止重定向

Answer 1

有a working plunker

我想说，我们在父视图中缺少儿童的目标

<div ui-view=""></div>

如果我们使用简化的视图表示法（没有 views : {} 对象），这是必须的。这个状态定义，正在做两件事

将home-1插入父ui-view
它将home-2插入root ui-view，跳过父

检查更新状态：

  .state ('home', {
        url: '/home',
        templateUrl: 'views/common.html'
    })
    .state ('home.home-1', {
        url: '/home-1',
        templateUrl: 'views/home.html'
    })
    .state ('home.home-2', {
      url: '/home-2',
      views: {
        '@' : {
          templateUrl: 'views/home.html'
        }
      }
    })

且父 views/common.html 现在包含：

<div ui-view>

来自doc的更多详情：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称州名称是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

检查here

原创部分

我想说，这个问题隐藏在此链接设置中：

<a href="#home2"...

因为我们的州定义了：

  .state ('home', {
        url: '/home',
        ...
    })
    .state ('home.home-1', {
        url: '/home-1',
        ...
    })
    .state ('home.home-2', {
        url: '/home-2',
        ...
    })

我们不使用HTML5模式，链接必须如下所示

<a href="#/home"...
<a href="#/home/home-1"...
<a href="#/home/home-2"...

所以：

<a href="#home2"实际上未知任何其他链接（例如原始UI-Router）。这就是为什么它会重定向到另外设置

此外，任何孩子都会从其父级继承网址，状态“home.home-1”网址是从父级/home构建的，并且自己的/home-1 === /home/home-1 < / p>

Angularjs - UI路由器否则和引导选项卡

1 个答案: