Diretiva de guias livres de modelo angular

O que?

Uma diretiva que obtém dados de sua fonte de escopo selecionada e cria uma interface opcional de guia rotativa com base em seu HTML embutido.

Por quê?

Existem inúmeras bibliotecas e ferramentas disponíveis para implementar carrosséis e guias, mas nenhuma das opções disponíveis se encaixam no que eu precisava.

  • O UI Bootstrap do Angular , por exemplo, tem algumas lindas diretivas para realizar essa mesma tarefa ( http://angular-ui.github.io/bootstrap/ ). Se você ainda não estiver usando o bootstrap e quiser manter sua pegada pequena, no entanto, não é uma opção muito atraente.
  • Guias angulares leves – o Angular tem a capacidade de ter algumas guias incrivelmente leves sem qualquer lógica explícita ( http://jsfiddle.net/vojtajina/vM4FY/ ). Isso é ótimo, mas eu queria algo um pouco mais orientado a modelos.
  • Qualquer outra diretiva de guias angulares – o problema com a maioria das diretivas de guias que vi é que elas dependem de modelos explícitos, seja em um arquivo de modelo separado ou na própria diretiva. Eu queria uma diretiva que lesse o DOM abaixo dela e aplicasse a lógica lá – sem a necessidade de mover o html do conteúdo da minha guia para outro lugar. Isso também torna mais fácil ter várias instâncias das guias.

Exemplo:

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

Código

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