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

Question

当我使用引导选项卡时，链接将自动重定向到主页，如否则选项中所述。我认为这是因为标签中的href中有散列标签。

Tabs

<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>

JS

$urlRouterProvider.otherwise("/home");
    $stateProvider
        .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',
            templateUrl: 'views/home.html'
        })

主菜单链接

<a data-ui-sref-active="active" data-ui-sref="home.home-1">Home 1</a>
<a data-ui-sref-active="active" data-ui-sref="home.home-2">Home 2</a>

我使用的是纯引导，而不是角度引导模块。如何通过防止额外的哈希标记来解决这个问题？我的意思是，当$stateProvider中没有声明的URL更改时，如何防止重定向

Answer 1

有工作用柱塞

我想说的是，在我们的父母看来，我们没有找到孩子们的目标。

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

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

1. 它将home-1插入父用户界面视图中。
2. 它将home-2插入根ui-视图，跳过父视图。

检查更新的状态：

  .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：

视图名称-相对名称与绝对名称

在幕后，每个视图都被分配一个绝对名称，该名称遵循viewname@statename，方案，其中视图名称是视图指令中使用的名称，而状态名称是该状态的绝对名称，例如contact.item。您还可以选择用绝对语法编写视图名称。 例如，前面的示例也可以编写为：

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

检查它，这里

原始部分

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

<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来说都是未知的。这就是为什么它被重定向到其他设置

而且，任何子节点都会从其父节点继承url，状态为‘does .does 1’url是由父/home和它自己的/home-1 === /home/home-1构建的。