[英]Angularjs - UI Router otherwise and bootstrap tabs
When I'm using Bootstrap tabs, links are automatically redirected to home page as stated in otherwise option. 当我使用“引导程序”选项卡时,链接会自动重定向到主页,如“其他选项”中所述。 I think it's because of the hash tags in href in tabs. 我认为这是因为标签中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 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'
})
Main Menu links 主菜单链接
<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>
I'm using pure Bootstrap NOT angular bootstrap module. 我正在使用纯Bootstrap NOT角度引导模块。 How can I fix this by preventing extra hash tags? 如何通过防止多余的哈希标签解决此问题? I mean how to prevent redirection when URL changes which are not stated in $stateProvider 我的意思是当$ stateProvider中未说明的URL更改时如何防止重定向
There is a working plunker 有一个正在工作的矮人
I would say, that we are missing target for children in our parent view 我要说的是,我们的父母认为我们错过了儿童的目标
<div ui-view=""></div>
This is a must if we use simplified views notation (without views : {}
object). 如果我们使用简化的视图符号(不带views : {}
对象),这是必须的。 This state definition, is doing two things 这个状态定义在做两件事
check updated states: 检查更新的状态:
.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'
}
}
})
and parent views/common.html
now contains: 并且父views/common.html
现在包含:
<div ui-view>
More details from doc: 来自doc的更多详细信息:
View Names - Relative vs. Absolute Names 视图名称-相对名称与绝对名称
Behind the scenes, every view gets assigned an absolute name that follows a scheme of
viewname@statename
, where viewname is the name used in the view directive and state name is the state's absolute name, eg contact.item. 在幕后,每个视图都被分配一个遵循viewname@statename
方案的绝对名称,其中viewname是视图指令中使用的名称, 状态名称是该州的绝对名称,例如contact.item。 You can also choose to write your view names in the absolute syntax. 您还可以选择以绝对语法编写视图名称。For example, the previous example could also be written as: 例如,前面的示例也可以写成:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
Original part 原始部分
I would say, that the issue is hidden in this link setting: 我要说的是,这个问题隐藏在此链接设置中:
<a href="#home2"...
Because our states are defined: 因为我们定义了状态:
.state ('home', {
url: '/home',
...
})
.state ('home.home-1', {
url: '/home-1',
...
})
.state ('home.home-2', {
url: '/home-2',
...
})
And we do not use HTML5 mode, the links must look like this 而且我们不使用HTML5模式,链接必须如下所示
<a href="#/home"...
<a href="#/home/home-1"...
<a href="#/home/home-2"...
So: 所以:
any other link (eg the original
<a href="#home2"
) is in fact unknown forUI-Router
. 实际上,UI-Router
不知道任何其他链接(例如,原始的<a href="#home2"
)。 And that's why it is redirect to otherwise setting 这就是为什么它被重定向到其他设置
Also, any child does inherit url from its parent, the state 'home.home-1' url is built from parent /home
and its own /home-1
=== /home/home-1
同样,任何子级都从其父级继承URL,状态'home.home-1'的URL是从父级/home
和其自己的/home-1
=== /home/home-1
构建的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.