AngularJS: ngInclude vs diretiva

93

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?

EricC
fonte
Eu sempre seguiria uma diretriz, mas estou curioso para saber o que diriam as pessoas mais experientes em Angular.
Austin Mullins
1
Se for realmente um componente independente, provavelmente deve ter seu próprio controlador associado a ele. OMI, eu usaria um parcial - mas, estou curioso para obter mais informações
tymeJV
4
Se houver algum código js necessário para essa parcial, use uma diretiva. Se for apenas HTML, use ngInclude.
Daniel Beck

Respostas:

122

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/

Mark Pieszak - Trilon.io
fonte
5
Eu concordo com esta resposta. A curva de aprendizado de diretivas é íngreme, mas realmente compensa quando você a entende.
Jazzy de
@mcpDESIGNS, um caso que talvez não se encaixe perfeitamente nessa resposta (pelo menos não nos dois primeiros parágrafos). Se eu tiver um parcial de navegação, com seu próprio controlador, e vou usá-lo apenas uma vez (no arquivo index.html), então isso provavelmente deve ser parcial e não uma diretiva, pois é usado apenas uma vez (é tipo de aplicativo separado no sentido de que não é incluído como parte do ngview), mesmo que tenha sua própria lógica. Ou?
EricC de
Isso ainda é confuso .. você também pode especificar um controlador ao usar o ngInclude, olhe para isto: stackoverflow.com/questions/13811948/…
Marwen Trabelsi
1
Claro, mas está sempre completamente conectado ao controlador pai de alguma forma. Onde uma diretiva pode criar um controlador dentro de si mesma para quando o modelo for carregado. Pode ser completamente separado (se você quiser)
Mark Pieszak - Trilon.io
1
A melhor coisa que você pode fazer é abstrair esse conceito em uma fábrica ou algo assim, dessa forma, você pode simplesmente chamá-lo de dentro de uma linkfunção e voila! Sem dúvida, teria sido bom incorporado às diretivas :( @Arwin
Mark Pieszak - Trilon.io