Last Updated: February 25, 2016
·
6.665K
· kadjar

Angular template-free tabs directive

What?

A directive that takes data from your selected scope source and creates an optionally rotating tab interface based on your in-line HTML.

Why?

There are countless libraries and tools out there to implement carousels and tabs, but none of the options out there fit what I needed.

  • Angular's UI Bootstrap, for example, has some beautiful directives to accomplish this very task (http://angular-ui.github.io/bootstrap/). If you're not using bootstrap already and want to keep your footprint small, however, it's not a terribly appealing option.
  • Lightweight Angular Tabs - Angular does have the capability to have some incredibly lightweight tabs without any explicit logic (http://jsfiddle.net/vojtajina/vM4FY/). That's great, but I wanted something a little more template-oriented.
  • Any other Angular tabs directive - the problem with most tabs directives I've seen is that they rely upon explicit templates, either in a separate template file or in the directive itself. I wanted a directive that read the DOM below it, and applied the logic there - without the need to move my tab content html elsewhere. This also makes it easier to have multiple instances of the tabs.

Example:

http://plnkr.co/edit/uuCMctEQv5ccGHazl4EU?p=preview

Code

https://github.com/kadjar/Angular-Tabs-Directive

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

Angular apps often share the page with analytics and payment scripts that are not Angular modules. Those scripts execute on the same origin as the framework.

Security insights from Cside