How to specify href parameter for angular ui-bootstrap tabs directive

Question

I am using the uw-bootstrap angular library, but I cannot specify how to specify a custom href for each tab.

<tab ng-repeat="tab in tabs" active="tab.active" heading={{tab.name}}></tab> 

An optional select () parameter was specified in angular ui-bootstrap docs, but I have no idea how to use this by setting up links for each tab

Another way to rephrase the question is how to use angular ui-bootstrap tabbed routing

Answer 1

I hope this is not too late, but today I ran into the same problem. You can achieve this:

1) Defining hrefs tabs in the controller:

 $scope.tabs = [ { title:"tab1", href:"#/route1/page1" }, { title:"tab2", href:"#/route1/page2" } ]; 

2) Declaration of the hash change function in the controller:

 $scope.changeHash = function(data) { window.location.hash = data; }; 

3) Use the following markup:

  <tabset> <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" select="changeHash(tab.href)" /> </tabset> 

I am not sure if this is the best approach and I would like to hear from others.

Answer 2

When using angular -ui-router you need to add the ui-sref attribute. eg.

 <tabset> <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ui-sref="stateName({param:somevalue,param2:tab.somekey})" /></tabset> 

Answer 3

To avoid the error $ rootScope: infdig, I followed the instructions and changed the function to:

 $scope.changeHash = function(data) { $location.path(data); }; 

But remember to enter the $ location service in the controller.