[英]How can I make the tab in an AngularJS uib-tabset linkable?
I have something like: 我有类似的东西:
<uib-tabset active="vm.activeTab">
<uib-tab index="0" heading="First"> </uib-tab>
<uib-tab index="1" heading="Second"> </uib-tab>
...
<uib-tabset>
And my controller recognizes ...#page&tab=second
to navigate here (by looking up the tab name and getting an index to set for the active tab). 并且我的控制器识别出
...#page&tab=second
可以在此处导航(通过查找选项卡名称并为活动选项卡设置索引)。 How can I expose the URL for each tab so a user can bookmark it or email it to someone or whatever? 如何显示每个标签的URL,以便用户可以将其添加书签或通过电子邮件发送给其他人或其他人?
I'd be OK with adding an ng-click
handler. 我可以添加
ng-click
处理程序。 I tried having that update location.href
but it refreshes the page. 我尝试使用该更新
location.href
但它刷新了页面。 I've seen answers suggesting history.pushState()
or history.replaceState()
but that seems to have the same problem. 我已经看到建议使用
history.pushState()
或history.replaceState()
答案,但这似乎有相同的问题。
I'd be OK with setting the href
of the tab so the user could pick "Copy link address" from the context menu over the tab but since the tab is an anchor with an empty href
I'm afraid that would change behavior. 我可以通过设置选项卡的
href
来确定,以便用户可以从选项卡上的上下文菜单中选择“复制链接地址”,但是由于该选项卡是具有空href
的锚点,因此恐怕会改变行为。 (And I can't figure out how to set that href
, anyway.) (而且我也不知道如何设置该
href
。)
Maybe I could add "Copy tab address" or something to the context menu. 也许我可以在上下文菜单中添加“复制选项卡地址”或其他内容。
I reviewed how to change route for each tab in uib-tabset but the answer there doesn't reference uib-tabset
even thought that seems to be what the question is asking about. 我回顾了如何更改uib-tabset中每个选项卡的路由,但那里的答案甚至没有引用
uib-tabset
甚至认为这就是问题所在。
You can use deep linking to achieve your goal. 您可以使用深层链接实现目标。
This article can help you deep link using ui-router . 本文可以帮助您使用ui-router进行深层链接 。
As we know ui-router is most popular way to manage routing to another state in angular application. 众所周知,ui-router是在角度应用程序中管理到另一种状态的路由的最流行方法。 Here we create a parent state which hold other children states.
在这里,我们创建一个包含其他子状态的父状态。 Now as you have provided url to them it will act as normal url which can be bookmarked or sent to someone.
现在,当您向他们提供url时,它将充当普通的url,可以将其添加为书签或发送给某人。
$stateProvider
.state("main", { abstract: true, url:"/main", templateUrl:"main.html" })
.state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
.state("main.tab3", { url: "/tab3", templateUrl: "tab3.html" });
})
Now by adding ng-repeat to generate the tab-list and setting values to select and and active 现在,通过添加ng-repeat生成选项卡列表并设置值以选择和激活
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
Controller for this state will go like this 该状态的控制器将像这样
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
This way It can be done 这样就可以做到
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.