As diretivas são a essência do AngularJS, permitindo estender o vocabulário do HTML para criar aplicações web dinâmicas. Elas funcioanm como marcadores em elementos do DOM que instruem o compilador do framework a anexar comportamentos específicos ou transformar o elemento e seus filhos.

Diretivas de Atributos de Estado

Existem diretivas projetadas para manipular estados booleanos de elementos HTML de forma reativa. Por exemplo, ng-disabled, ng-readonly e ng-checked permitem que o estado de campos de formulário seja controlado diretamente por expressões do escopo.

<div>
 <label>Bloquear edição:</label>
 <input type="checkbox" ng-model="travarCampo">
 <br/>
 <input type="text" ng-readonly="travarCampo" value="Conteúdo do campo">
</div>

Gerenciamento de Links e Imagens

Ao trabalhar com caminhos dinâmicos, é fundamental utilizar ng-href e ng-src em vez dos atributos nativos. Isso evita que o navegador tente carregar um recurso antes que a expressão do AngularJS (ex: {{url}}) tenha sido processada, o que resultaria em erros de requisição (404).

<!-- Forma correta para links dinâmicos -->
<a ng-href="{{linkDinamico}}">Acessar Recurso</a>

Escopo e Hierarquia de Controladores

A diretiva ng-controller cria um novo escopo que herda do escopo pai. Um conceito crítico no AngularJS é o funcionamento da herança prototípica. Quando trabalhamos com valores primitivos (strings, booleans) diretamente no $scope, a alteração em um escopo filho pode não refletir no pai, pois o filho cria uma cópia local.

A melhor prática é sempre utilizar um objeto como "ponte" (o famoso "ponto no modelo") para garantir que a referência seja compartilhada corretamente entre controladores aninhados.

angular.module('appExemplo', [])
 .controller('PaiController', function($scope) {
   // Utilizando objeto para garantir herança por referência
   $scope.modelo = {
     texto: 'Valor inicial'
   };
 })
 .controller('FilhoController', function($scope) {
   $scope.atualizar = function() {
     $scope.modelo.texto = 'Alterado pelo filho';
   };
 });

Renderização de Listas e Condicionais

Para iterar sobre coleções de dados, utilizamos o ng-repeat. Esta diretiva oferece propriedades úteis como $index, $even e $odd, facilitando a aplicação de estilos intercalados.

<ul ng-controller="ListaController">
 <li ng-repeat="item in produtos" ng-class="{cinza: $even, branco: $odd}">
   {{$index + 1}}. {{item.nome}} - {{item.preco | currency}}
 </li>
</ul>

Para controle de visibilidade, o framework oferece ng-if, ng-show e ng-hide. A diferença fundamental é que o ng-if remove ou adiciona o elemento no DOM, enquanto os outros apenas alteram a propriedade CSS display.

Interação e Formulários

O ng-model estabelece uma via de mão dupla (two-way data binding) entre a view e o model. Combinado com ng-change e ng-submit, permite validar e processar dados de forma eficiente.

<form ng-submit="enviarDados()">
 <input type="email" ng-model="usuario.email" required>
 <button type="submit">Cadastrar</button>
</form>

Prevenção de FOUC com ng-cloak

Para evitar que as expressões entre chaves {{ }} apareçam rapidamente na tela antes do Angular processá-las (efeito conhecido como Flash of Unrendered Content), utiliza-se a diretiva ng-cloak em conjunto com regras CSS específicas que ocultam o elemento até que o framework esteja pronto.