AngularJS UI Bootstrap Tabs that support routing

angularjs angularjs-directive angular-ui-bootstrap bootstrap-tabs
Misha Moroshko picture Misha Moroshko · Jun 1, 2013 · Viewed 41.7k times · Source

I would like to use AngularJS UI Bootstrap Tabs in my project, but I need it to support routing.

For example:

Tab         URL
--------------------
Jobs       /jobs
Invoices   /invoices
Payments   /payments

As far as I can tell from the source code, the current tabs and pane directives doesn't support routing.

What would be the best way to add routing?

Answer

Chris White picture Chris White · Jun 2, 2013

To add routing you typically use an ng-view directive. I'm not sure it's easy enough to modify angular UI to support what you're looking for, but here's a plunker showing roughly what i think you're looking for (it's not necessarily the best way of doing it - hopefully someone can give you a better solution or improve on this)

Related questions

Extending AngularJs Directive

I'd like to make a minor modification to a 3rd party directive (specifically Angular UI Bootstrap). I simply want to add to the scope of the pane directive: angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($…

Read More
How to show form input errors using AngularJS UI Bootstrap tooltip?

For example I have the form where I am showing form input errors. I need to show red badge (with 'hover to show errors') near input label if there are some errors. If user will hover this red badge - …

Read More
Create Hoverable popover using angular-ui-bootstrap

I have the following code for creating a popover in my template file: <span class="icon-globe visibility" id="visibilityFor{{post.metaData.assetId}}" popover="{{post.visibilityListStr}}" popover-placement="right" popover-trigger="mouseenter" popover-popup-delay="50" visibility> </span> I have a few …

Read More