Diretivas AngularJS
O AngularJS permite estender o HTML com novos atributos chamados Diretivas .
O AngularJS possui um conjunto de diretivas integradas que oferece funcionalidade para seus aplicativos.
AngularJS também permite definir suas próprias diretivas.
Diretivas AngularJS
As diretivas AngularJS são atributos HTML estendidos com o prefixo ng-.
A ng-appdiretiva inicializa um aplicativo AngularJS.
A ng-initdiretiva inicializa os dados do aplicativo.
A ng-modeldiretiva vincula o valor dos controles HTML (entrada, seleção, área de texto) aos dados do aplicativo.
Leia sobre todas as diretivas AngularJS em nossa referência de diretiva AngularJS .
Exemplo
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
A ng-appdiretiva também informa ao AngularJS que o elemento <div> é o "proprietário" do aplicativo AngularJS.
Ligação de dados
A {{ firstName }}expressão, no exemplo acima, é uma expressão de ligação de dados AngularJS.
A vinculação de dados em AngularJS vincula expressões AngularJS com dados AngularJS.
{{ firstName }}está vinculado com ng-model="firstName".
No próximo exemplo, dois campos de texto são vinculados com duas diretivas ng-model:
Exemplo
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
O uso ng-initnão é muito comum. Você aprenderá como inicializar dados no capítulo sobre controladores.
Repetindo Elementos HTML
A ng-repeatdiretiva repete um elemento HTML:
Exemplo
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
A ng-repeatdiretiva realmente clona elementos HTML
uma vez para cada item em uma coleção.
A ng-repeatdiretiva usada em uma matriz de objetos:
Exemplo
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS é perfeito para aplicativos CRUD (Create Read Update Delete) de banco de dados.
Imagine se esses objetos fossem registros de um banco de dados.
A diretiva no aplicativo
A ng-appdiretiva define o elemento raiz de um aplicativo AngularJS.
A ng-appdiretiva irá auto-bootstrap (inicializar automaticamente) o aplicativo quando uma página da web for carregada.
A Diretiva do Calor
A ng-initdiretiva define valores iniciais para um aplicativo AngularJS.
Normalmente, você não usará ng-init. Você usará um controlador ou módulo em vez disso.
Você aprenderá mais sobre controladores e módulos posteriormente.
A diretiva de modelagem
A ng-modeldiretiva vincula o valor dos controles HTML (entrada, seleção, área de texto) aos dados do aplicativo.
A ng-modeldiretiva também pode:
- Forneça validação de tipo para dados do aplicativo (número, e-mail, obrigatório).
- Forneça o status dos dados do aplicativo (inválido, sujo, tocado, erro).
- Fornece classes CSS para elementos HTML.
- Vincule elementos HTML a formulários HTML.
Leia mais sobre a ng-modeldiretiva no próximo capítulo.
Criar novas diretivas
Além de todas as diretivas internas do AngularJS, você pode criar suas próprias diretivas.
Novas diretivas são criadas usando a .directivefunção.
Para invocar a nova diretiva, crie um elemento HTML com o mesmo nome de tag da nova diretiva.
Ao nomear uma diretiva, você deve usar um nome camel case,
w3TestDirective, mas ao invocá-lo, você deve usar -name separado, w3-test-directive:
Exemplo
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Você pode invocar uma diretiva usando:
- Nome do elemento
- Atributo
- Classe
- Comente
Os exemplos abaixo produzirão o mesmo resultado:
Nome do elemento
<w3-test-directive></w3-test-directive>
Atributo
<div w3-test-directive></div>
Classe
<div class="w3-test-directive"></div>
Comente
<!-- directive: w3-test-directive -->
Restrições
Você pode restringir suas diretivas para serem invocadas apenas por alguns dos métodos.
Exemplo
Ao adicionar uma restrictpropriedade com o valor "A", a diretiva só pode ser invocada por atributos:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Os valores legais restritos são:
Epara o nome do elementoApara atributoCpara classeMpara comentário
Por padrão, o valor é EA, o que significa que tanto os nomes de elementos quanto os nomes de atributos podem invocar a diretiva.