O que é uma diretiva personalizada?
Uma diretiva personalizada em Angular Js é uma diretiva definida pelo usuário com a funcionalidade desejada. Embora o AngularJS tenha muitas diretivas poderosas prontas para usar, às vezes são necessárias diretivas personalizadas.
Neste tutorial, você aprenderá-
- Como criar uma diretiva personalizada?
- Diretivas e escopos do AngularJs
- Usando controladores com diretivas
- Como criar diretivas reutilizáveis
- Diretivas e componentes do AngularJS - ng-transcluir
- Diretivas aninhadas
- Tratamento de eventos em uma diretiva
Como criar uma diretiva personalizada?
Vamos dar uma olhada em um exemplo de como podemos criar uma diretiva personalizada.
A diretiva personalizada em nosso caso vai simplesmente injetar uma tag div que tem o texto "Tutorial do AngularJS" em nossa página quando a diretiva é chamada.
Event Registration Guru99 Global Event
Explicação do código:
- Estamos criando primeiro um módulo para nosso aplicativo angular. Isso é necessário para criar uma diretiva personalizada porque a diretiva será criada usando este módulo.
- Agora estamos criando uma diretiva personalizada chamada "ngGuru" e definindo uma função que terá um código personalizado para nossa diretiva.
Observação:-
Observe que ao definir a diretiva, nós a definimos como ngGuru com a letra 'G' maiúscula. E quando o acessamos a partir de nossa tag div como uma diretiva, estamos acessando-o como ng-guru. É assim que o angular entende as diretivas personalizadas definidas em um aplicativo. Em primeiro lugar, o nome da diretiva personalizada deve começar com as letras 'ng'. Em segundo lugar, o símbolo de hífen '-' só deve ser mencionado ao chamar a diretiva. E em terceiro lugar, a primeira letra após as letras 'ng' ao definir a diretiva pode ser maiúscula ou minúscula.
- Estamos usando o parâmetro de modelo, que é um parâmetro definido pela Angular para diretivas personalizadas. Nesse caso, estamos definindo que sempre que essa diretiva for usada, basta usar o valor do template e injetá-lo no código de chamada.
- Aqui, agora estamos fazendo uso de nossa diretiva "ng-guru" criada de maneira personalizada. Quando fazemos isso, o valor que definimos para nosso modelo "Angular JS Tutorial" agora será injetado aqui.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
- A saída acima mostra claramente que nossa diretiva ng-guru personalizada, que tem o modelo definido para mostrar um texto personalizado, é exibida no navegador.
Diretivas e escopos do AngularJs
O escopo é definido como a cola que liga o controlador à visualização, gerenciando os dados entre a visualização e o controlador.
Ao criar diretivas AngularJs personalizadas, eles, por padrão, terão acesso ao objeto de escopo no controlador pai.
Desta forma, torna-se fácil para a diretiva customizada fazer uso dos dados que estão sendo passados para o controlador principal.
Vejamos um exemplo de como podemos usar o escopo de um controlador pai em nossa diretiva personalizada.
Event Registration Guru99 Global Event
Explicação do código:
- Primeiro criamos um controlador chamado "DemoController". Nesse caso, definimos uma variável chamada tutorialName e a anexamos ao objeto de escopo em uma instrução - $ scope.tutorialName = "AngularJS".
- Em nossa diretiva personalizada, podemos chamar a variável "tutorialName" usando uma expressão. Esta variável estaria acessível porque está definida no controlador "DemoController", que se tornaria o pai desta diretiva.
- Fazemos referência ao controlador em uma tag div, que atuará como nossa tag div pai. Observe que isso precisa ser feito primeiro para que nossa diretiva personalizada acesse a variável tutorialName.
- Finalmente, apenas anexamos nossa diretiva personalizada "ng-guru" à nossa tag div.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
- A saída acima mostra claramente que nossa diretiva customizada "ng-guru" faz uso da variável de escopo tutorialName no controlador pai.
Usando controladores com diretivas
Angular oferece a facilidade de acessar a variável de membro do controlador diretamente de diretivas personalizadas sem a necessidade do objeto de escopo.
Isso se torna necessário às vezes porque em um aplicativo você pode ter vários objetos de escopo pertencentes a vários controladores.
Portanto, há uma grande chance de você cometer o erro de acessar o objeto de escopo do controlador errado.
Em tal cenário, há uma maneira de mencionar especificamente dizendo "Eu quero acessar este controlador específico" da minha diretiva.
Vamos dar uma olhada em um exemplo de como podemos conseguir isso.
Event Registration Guru99 Global Event
Explicação do código:
- Primeiro criamos um controlador chamado "DemoController". Neste vamos definir uma variável chamada "tutorialName" e desta vez em vez de anexá-la ao objeto de escopo, iremos anexá-la diretamente ao controlador.
- Em nossa diretiva personalizada, estamos mencionando especificamente que queremos usar o controlador "DemoController" usando a palavra-chave do parâmetro do controlador.
- Criamos uma referência ao controlador usando o parâmetro "controllerAs". Isso é definido pelo Angular e é a forma de referenciar o controlador como uma referência.
Nota: - É possível acessar vários controladores em uma diretiva especificando os respectivos blocos do controlador, controladorAs e instruções de modelo.
- Finalmente, em nosso modelo, estamos usando a referência criada na etapa 3 e a variável membro que foi anexada diretamente ao controlador na etapa 1.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
A saída mostra claramente que a diretiva personalizada está acessando especialmente o DemoController e a variável de membro tutorialName anexada a ele e exibe o texto "Angular".
Como criar diretivas reutilizáveis
Já vimos o poder das diretivas personalizadas, mas podemos levar isso para o próximo nível, criando nossas próprias diretivas reutilizáveis.
Digamos, por exemplo, que desejamos injetar um código que sempre mostre as tags HTML abaixo em várias telas, que é basicamente apenas uma entrada para o "Nome" e "idade" do usuário.
Para reutilizar essa função em várias telas sem codificação a cada vez, criamos um controle mestre ou diretiva no angular para manter esses controles ("Nome" e "idade" do usuário).
Portanto, agora, em vez de inserir o mesmo código para a tela abaixo todas as vezes, podemos realmente embutir esse código em uma diretiva e embutir essa diretiva a qualquer momento.
Vamos ver um exemplo de como podemos conseguir isso.
Event Registration Guru99 Global Event
Explicação do código:
- Em nosso trecho de código para uma diretiva personalizada, o que muda é apenas o valor que é dado ao parâmetro do modelo de nossa diretiva personalizada.
Em vez de uma tag ou texto do plano cinco, estamos inserindo todo o fragmento de 2 controles de entrada para o "Nome" e "idade" que precisa ser mostrado em nossa página.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
A partir da saída acima, podemos ver que o trecho de código do modelo da diretiva personalizada é adicionado à página.
Diretivas e componentes do AngularJS - ng-transcluir
Como mencionamos antes, o Angular tem como objetivo estender a funcionalidade do HTML. E já vimos como podemos ter injeção de código usando diretivas reutilizáveis personalizadas.
Mas, no desenvolvimento de aplicativos da web moderno, também existe um conceito de desenvolvimento de componentes da web. O que basicamente significa criar nossas próprias tags HTML que podem ser usadas como componentes em nosso código.
Conseqüentemente, o angular fornece outro nível de poder para estender as tags HTML, dando a capacidade de injetar atributos nas próprias tags HTML.
Isso é feito pela tag " ng-transclude ", que é um tipo de configuração para dizer ao angular para capturar tudo o que é colocado dentro da diretiva na marcação.
Vamos dar um exemplo de como podemos conseguir isso.
Event Registration Guru99 Global Event
Angular JS
Explicação do código:
- Estamos usando a diretiva para definir uma tag HTML personalizada chamada 'painel' e adicionando uma função que colocará algum código personalizado para essa tag. Na saída, nossa tag de painel personalizado exibirá o texto "AngularJS" em um retângulo com uma borda preta sólida.
- O atributo "transclude" deve ser mencionado como verdadeiro, o que é exigido pelo angular para injetar essa tag em nosso DOM.
- No escopo, estamos definindo um atributo de título. Os atributos são normalmente definidos como pares nome / valor como: nome = "valor". Em nosso caso, o nome do atributo em nossa tag HTML de painel é "título". O símbolo "@" é o requisito do angular. Isso é feito para que, quando a linha title = {{title}} for executada na Etapa 5, o código personalizado para o atributo title seja adicionado à tag HTML do painel.
- O código personalizado para os atributos do título, que apenas desenha uma borda preta sólida para o nosso controle.
- Finalmente, estamos chamando nossa tag HTML personalizada junto com o atributo title que foi definido.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
- A saída mostra claramente que o atributo title da tag pane html5 foi definido com o valor personalizado de "Angular.JS".
Diretivas aninhadas
As diretivas em angular podem ser aninhadas. Como apenas módulos internos ou funções em qualquer linguagem de programação, você pode precisar incorporar diretivas umas às outras.
Você pode obter uma melhor compreensão disso vendo o exemplo abaixo.
Neste exemplo, estamos criando 2 diretivas chamadas "externo" e "interno".
- A diretiva interna exibe um texto chamado "Interno".
- Enquanto a diretiva externa realmente faz uma chamada para a diretiva interna para exibir o texto chamado "Interno".
Guru99 Global Event