AngularJS: diretiva ngInclude vs

Eu não entendo muito bem quando usar uma diretiva e quando seria mais apropriado usar o nginclude. Veja este exemplo: Eu tenho uma password-and-confirm-input-fields.html parcial e 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 tem um controlador cada, o html parcial não tem um controlador dedicado.

Devo usar diretiva ou ngInclude para isso?

Tudo depende do que você quer do seu fragment de código. Pessoalmente, se o código não tem nenhuma lógica, ou nem precisa de um controlador, então eu vou com ngInclude . Eu normalmente coloco fragments html “estáticos” maiores que eu não quero bagunçar a visão aqui. (ie: Digamos que uma tabela grande cujos dados vêm do Controlador pai de qualquer maneira. É mais limpo ter

que todas aquelas linhas que congestionam a Visualização)

Se houver lógica, manipulação de DOM, ou você precisar que ela seja personalizável (em outras situações é usada), então as directives são a melhor escolha (elas são assustadoras no começo, mas são muito poderosas, dê tempo ).

ngInclude

Às vezes você verá os ngInclude's que são afetados por sua interface $scope / exterior. Tal como um repetidor grande / complicado, vamos dizer. Essas duas interfaces estão ligadas por causa disso. Se algo no $scope principal mudar, você deve alterar / alterar sua lógica dentro da sua parcial incluída.

Diretivas

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

Além disso, sempre que você estiver interagindo com o DOM, você deve usar uma diretiva. Isso faz com que seja melhor para o teste, e separa essas ações de um controlador / serviço / etc, que é algo que você quer!

Dica: não use restrito: ‘E’ se você se preocupa com o IE8! Existem maneiras de contornar isso, mas são irritantes. Apenas facilite a vida e mantenha o atributo / etc.

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

Adicionado no Angular 1.5, é essencialmente um wrapper em torno de .directve() . Componente deve ser usado na maioria das vezes. Ele remove um monte de código de diretiva boilerplate, por padrão, para coisas como restrict: 'E', scope : {}, bindToController: true . Eu recomendo usá-los para quase tudo no seu aplicativo, para poder fazer a transição para o Angular2 mais facilmente.

Em conclusão:

Você deve criar Componentes e Diretivas na maioria das vezes.

  • Mais extensível
  • Você pode criar um modelo e ter seu arquivo externamente (como ngInclude)
  • Você pode optar por usar o escopo pai ou seu escopo isolado dentro da diretiva.
  • Melhor reutilização em toda a sua aplicação


Atualização 01/03/2016

Agora que o Angular 2 está lentamente encerrando, e sabemos que o formato geral (claro que ainda haverá algumas mudanças aqui e ali) só queria adicionar o quão importante é fazer os components (às vezes diretivas se você precisar que elas sejam restritas: ‘E’ por exemplo).

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


Certifique-se de encapsular tantas coisas quanto possível nos componentes, isso facilitará muito a transição para o Angular 2! (Se você optar por fazer a transição)

Aqui está um bom artigo descrevendo esse processo de migration usando directives (muito semelhantes se você fosse usar componentes, é claro): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/