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

Question

我有类似的东西：

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

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

我回顾了如何更改uib-tabset中每个选项卡的路由，但那里的答案甚至没有引用uib-tabset甚至认为这就是问题所在。

Answer 1

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

本文可以帮助您使用ui-router进行深层链接 。

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

这样就可以做到