How can I make the tab in an AngularJS uib-tabset linkable?

Question

I have something like:

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

And my controller recognizes ...#page&tab=second to navigate here (by looking up the tab name and getting an index to set for the active tab). How can I expose the URL for each tab so a user can bookmark it or email it to someone or whatever?

I'd be OK with adding an ng-click handler. I tried having that update location.href but it refreshes the page. I've seen answers suggesting history.pushState() or history.replaceState() but that seems to have the same problem.

I'd be OK with setting the href of the tab so the user could pick "Copy link address" from the context menu over the tab but since the tab is an anchor with an empty href I'm afraid that would change behavior. (And I can't figure out how to set that href , anyway.)

Maybe I could add "Copy tab address" or something to the context menu.

I reviewed how to change route for each tab in uib-tabset but the answer there doesn't reference uib-tabset even thought that seems to be what the question is asking about.

Answer 1

You can use deep linking to achieve your goal.

This article can help you deep link using ui-router .

As we know ui-router is most popular way to manage routing to another state in angular application. Here we create a parent state which hold other children states. Now as you have provided url to them it will act as normal url which can be bookmarked or sent to someone.

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

Now by adding ng-repeat to generate the tab-list and setting values to select and and active

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

Controller for this state will go like this

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

This way It can be done