如何使AngularJS uib-tabset中的選項卡可鏈接？

我有類似：如何使AngularJS uib-tabset中的選項卡可鏈接？

<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，無論如何。）

也許我可以添加「複製選項卡地址」或其他內容菜單。

我評論了how to change route for each tab in uib-tabset，但答案並沒有提及uib-tabset甚至認爲這似乎是問題的問題。

來源

2017-06-19 Chris Nelson

我開始認爲這不能做，可能應該是Angular的功能要求。以爲我在1.5左右，似乎不太可能如此老的版本將被更新。 –

您可以使用深層鏈接來實現您的目標。

本文可以幫助您 deep link using ui-router。

正如我們所知，ui-router是在角度應用中管理路由到另一個狀態的最流行的方式。在這裏我們創建一個擁有其他孩子狀態的父母狀態。現在，當您向他們提供網址時，它將充當可以加入書籤或發送給某人的普通網址。

$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-重複生成的標籤列表和設置值來選擇和活躍

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

這方式它可以做

來源

2017-07-26 09:46:55 abby37

如何使AngularJS uib-tabset中的選項卡可鏈接？

回答

相關問題