AngularJS: ngInclude vs diretiva

Não entendo muito bem quando usar uma diretiva e quando seria mais apropriado usar nginclude. Veja este exemplo: Eu tenho um parcial password-and-confirm-input-fields.html, que é o html para inserir e confirmar uma senha. Eu uso isso tanto na página de inscrição quanto na página de alteração de senha. Essas duas páginas têm um controlador cada, o html parcial não tem controlador dedicado.

Devo usar diretiva ou ngIncludepara isso?

Tudo depende do que você deseja do seu fragmento de código. Pessoalmente, se o código não tiver nenhuma lógica, ou nem precisar de um controlador, eu continuo ngInclude. Normalmente coloco fragmentos html maiores e mais "estáticos" que não quero atrapalhar a visualização aqui. (isto é: digamos que uma grande tabela cujos dados vêm do controlador pai de qualquer maneira. É mais limpo do <div ng-include="bigtable.html" />que todas as linhas que obstruem a visualização)

Se houver lógica, manipulação de DOM ou se você precisar que seja personalizável (também conhecido como renderizar de forma diferente) em diferentes instâncias em que for usado, então directivessão a melhor escolha (são assustadores no início, mas são muito poderosos, dê um tempo) .

ngInclude

Às vezes você verá ngInclude'sque são afetados por seu $scope/ exterior interface. Como um repetidor grande / complicado, digamos. Essas 2 interfaces estão interligadas por causa disso. Se algo nas principais $scopemudanças, você deve alterar / alterar sua lógica dentro do seu parcial incluído.

Diretivas

Por outro lado, as diretivas podem ter escopos / controladores / etc. explícitos. Portanto, se você estiver pensando em um cenário em que terá que reutilizar algo várias vezes, poderá ver como ter seu próprio escopo conectado tornaria a vida mais fácil e menos confuso.

Além disso, a qualquer momento que você for interagir com o DOM, você deve usar uma diretiva. Isso o torna melhor para teste e desacopla essas ações de um controlador / serviço / etc, que é algo que você deseja!

Dica: certifique-se de não usar restrito: 'E' se você se preocupa com o IE8! Existem maneiras de contornar isso, mas são irritantes. Basta tornar a vida mais fácil e ficar com o atributo / etc.<div my-directive />

Componentes [atualização 01/03/2016]

Adicionado no Angular 1.5, é essencialmente um invólucro .directve(). O componente deve ser usado na maioria das vezes. Ele remove muito código de diretiva clichê, por padrão para coisas como restrict: 'E', scope : {}, bindToController: true. Eu recomendo fortemente o uso deles para quase tudo em seu aplicativo, a fim de poder fazer a transição para o Angular2 mais facilmente.

Em conclusão:

Você deve criar Componentes e Diretivas na maior parte do tempo.

• Mais extensível
• Você pode modelar e ter seu arquivo externamente (como ngInclude)
• Você pode escolher usar o escopo pai ou seu próprio escopo isolado dentro da diretiva.
• Melhor reutilização em todo o seu aplicativo

Atualização 01/03/2016

Agora que o Angular 2 está sendo concluído aos poucos, e sabemos o formato geral (é claro que ainda haverá algumas mudanças aqui e ali), só queria adicionar o quão importante é fazer components(às vezes, diretivas se você precisar que sejam restritas: ' E 'por exemplo).

Os componentes são muito semelhantes aos do Angular 2 @Component. Desta forma, estamos encapsulando o logic & html na mesma área.

Certifique-se de encapsular o máximo de coisas que puder em componentes, isso tornará a transição para o Angular 2 muito mais fácil! (Se você escolher fazer a transição)

Aqui está um bom artigo que descreve esse processo de migração usando directives(muito semelhante se você fosse usar componentes, é claro): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/