如何使 AngularJS uib-tabset 中的选项卡可链接？答案

【问题标题】：How can I make the tab in an AngularJS uib-tabset linkable?如何使 AngularJS uib-tabset 中的选项卡可链接？
【发布时间】：2017-06-19 16:55:08
【问题描述】：

我有类似的东西：

<uib-tabset active="vm.activeTab">
    <uib-tab index="0" heading="First"> </uib-tab>
    <uib-tab index="1" heading="Second"> </uib-tab>
...
<uib-tabset>

并且我的控制器识别...#page&tab=second 可以在此处导航（通过查找选项卡名称并获取要为活动选项卡设置的索引）。如何公开每个选项卡的 URL，以便用户可以将其添加为书签或通过电子邮件将其发送给某人或其他人？

我可以添加ng-click 处理程序。我尝试更新location.href，但它刷新了页面。我看过建议history.pushState() 或history.replaceState() 的答案，但这似乎有同样的问题。

我可以设置选项卡的href，以便用户可以从选项卡上的上下文菜单中选择“复制链接地址”，但由于选项卡是一个带有空 href 的锚点担心会改变行为。（无论如何，我不知道如何设置 href。）

也许我可以在上下文菜单中添加“复制标签地址”或其他内容。

我查看了how to change route for each tab in uib-tabset，但那里的答案没有引用uib-tabset，甚至认为这似乎是问题所要问的。

【问题讨论】：

我开始认为这无法完成，可能应该是 Angular 的功能请求。以为我在 1.5 左右，似乎不太可能更新这么旧的版本。

标签： angularjs hyperlink angular-ui-bootstrap-tab

【解决方案1】：

您可以使用深层链接来实现您的目标。

这篇文章可以帮助你 deep link using ui-router.

我们知道 ui-router 是 Angular 应用程序中管理路由到另一个状态的最流行的方式。在这里，我们创建一个包含其他子状态的父状态。现在，当您向他们提供 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" });
})

现在通过添加 ng-repeat 来生成选项卡列表并设置值以选择和激活

<tabset>
  <tab
    ng-repeat="t in tabs"
        heading="{{t.heading}}"
        select="go(t.route)"
        active="t.active">
  </tab>
</tabset>

这个状态的控制器会是这样的

$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);
  });

这样就可以了

【讨论】：