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を設定する方法はわかりません）

「コピーするタブアドレス」などをコンテキストメニューに追加することができます。

私はhow to change route for each tab in uib-tabsetを見直しましたが、そこには答えがありませんuib-tabset質問がしているように思えていました。

Answer 1

ディープリンクを使用して目標を達成できます。

この記事は助けることができます deep link using ui-router

私たちが知っているように、ui-routerは角型アプリケーションの別の状態へのルーティングを管理する最も一般的な方法です。ここでは、他の子どもの状態を保持する親状態を作成します。今度はあなたにURLを提供しているので、ブックマークや誰かに送ることができる通常のURLとして機能します。タブのリストを生成するために、NG-繰り返しを追加し、この

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

このようになります。この状態の値を選択するように設定すると、アクティブ

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

コントローラによって今

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

wayこれは実行することができます