如何使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);
  });

這樣就可以做到