Índice
Podemos estender a operação do HTML por meio de mudança de comportamento e transformações de árvore SOL, com isso podemos modificar elementos, adicionar novos estilos e outras ações que nos permitem desenvolver uma interface de usuário mais dinâmica, para isso devemos fazer uso do diretivas.Para isso, podemos usar o diretivas próprio de AngularJSPorém, se precisarmos de algo que não podemos alcançar nativamente, podemos escrever nossas próprias diretivas, com isso seremos capazes de ouvir e responder aos eventos do navegador ou simplesmente fazer coisas que ele não faz. AngularJS por padrão.
Ao desenvolver um aplicativo com AngularJS haverá algumas ocasiões em que encontraremos situações em que as diretivas nativas não cumprem com nossa ideia do que nosso código deve fazer, em momentos como este podemos apelar para construir nossas próprias diretrizes.
Para definir uma nova diretiva, podemos seguir a seguinte fórmula:
var moduloApp = angular.module ('moduloApp', […]); moduloApp.directive ('DirectiveName', DirectiveMethod); Como podemos ver, só temos que definir o módulo no qual vamos aplicar nossa diretiva e depois devemos indicar o seu nome e o método que ela deve executar.
HTML 5 tem uma funcionalidade muito interessante que é o auto-foco, isso nos permite focar um elemento de entrada em um formulário, ajudando assim a definir o caminho para um usuário, porém o que acontece se não tivermos HTML 5 e não queremos nos concentrar em uma entrada, porque é aí que entra em jogo AngularJS e as directivas, com uma directiva podemos resolver esta situação de uma forma simples.
Que devemos fazer?Primeiramente devemos construir uma diretiva customizada utilizando o formulário que indicamos anteriormente, com isso estabelecemos o comportamento desejado, neste caso o auto-foco. Então, graças ao objeto $ scope Podemos aplicar esta diretiva a qualquer elemento, no caso deste exemplo vamos aplicá-la a um link, com isso podemos experimentar o poder de AngularJS.
Vamos ver o resultado do que queremos alcançar:
Sem foco Com foco{{mensagem de texto}}Como podemos ver, estabelecemos uma diretiva personalizada no início, o que leva a colocar o auto-foco no elemento que possui esta diretiva, então construímos um controlador que nos ajudará a detectar as mudanças ao imprimir algumas mensagens.
Com isso encerramos este tutorial, pois vemos a manipulação do SOL é viável com AngularJS e graças às diretivas podemos alcançar efeitos muito interessantes.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
