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