AngularJS: ngInclude vs directive

93

Je ne comprends pas très bien quand utiliser une directive et quand il serait plus approprié d'utiliser nginclude. Prenons cet exemple: j'ai un partiel, password-and-confirm-input-fields.htmlc'est le html pour entrer et confirmer un mot de passe. J'utilise ceci à la fois sous la page d'inscription et sous la page de changement de mot de passe. Ces deux pages ont chacune un contrôleur, le HTML partiel n'a pas de contrôleur dédié.

Dois-je utiliser directive ou ngIncludepour cela?

EricC
la source
J'irais avec une directive à chaque fois, mais je suis curieux de savoir ce que les gens angulaires plus expérimentés diraient.
Austin Mullins
1
S'il s'agit vraiment d'un composant indépendant, il devrait probablement avoir son propre contrôleur associé. IMO, j'utiliserais un partiel - mais, je suis curieux de savoir plus
tymeJV
4
Si du code js est nécessaire pour ce partiel, utilisez une directive. S'il ne s'agit que de HTML, utilisez ngInclude.
Daniel Beck

Réponses:

122

Tout dépend de ce que vous attendez de votre fragment de code. Personnellement, si le code n'a aucune logique, ou n'a même pas besoin d'un contrôleur, alors je vais avec ngInclude. Je mets généralement de gros fragments HTML plus "statiques" que je ne veux pas encombrer ici. (c'est-à-dire: disons une grande table dont les données proviennent du contrôleur parent de toute façon. C'est plus propre d'avoir <div ng-include="bigtable.html" />que toutes ces lignes encombrant la vue)

S'il y a une logique, une manipulation DOM, ou si vous avez besoin qu'elle soit personnalisable (c'est-à-dire rendre différemment) dans différentes instances où elle est utilisée, alors directivesc'est le meilleur choix (elles sont intimidantes au début, mais elles sont très puissantes, laissez-lui le temps) .

ngInclude

Parfois, vous verrez ngInclude'squi sont affectés par leur extérieur $scope/ interface. Comme un répéteur grand / compliqué disons. Ces 2 interfaces sont liées ensemble à cause de cela. Si quelque chose dans le principal $scopechange, vous devez modifier / changer votre logique dans votre partiel inclus.

Directives

D'un autre côté, les directives peuvent avoir des portées / contrôleurs / etc. explicites. Donc, si vous pensez à un scénario où vous auriez à réutiliser quelque chose plusieurs fois, vous pouvez voir comment avoir sa propre portée connectée rendrait la vie plus facile et moins déroutant.

De plus, à chaque fois que vous allez interagir avec le DOM, vous devez utiliser une directive. Cela le rend meilleur pour les tests et dissocie ces actions d'un contrôleur / service / etc, ce que vous voulez!

Astuce: assurez-vous de ne pas utiliser restrict: 'E' si vous vous souciez d'IE8! Il existe des moyens de contourner cela, mais ils sont ennuyeux. Simplifiez-vous la vie et tenez-vous-en à l'attribut / etc.<div my-directive />

Composants [Mise à jour du 01/03/2016]

Ajouté dans Angular 1.5, c'est essentiellement un wrapper .directve(). Le composant doit être utilisé la plupart du temps. Il supprime beaucoup de code de directive standard, par défaut à des choses comme restrict: 'E', scope : {}, bindToController: true. Je recommande vivement de les utiliser pour presque tout dans votre application, afin de pouvoir passer plus facilement à Angular2.

En conclusion:

Vous devriez créer des composants et des directives la plupart du temps.

  • Plus extensible
  • Vous pouvez modéliser et avoir votre fichier en externe (comme ngInclude)
  • Vous pouvez choisir d'utiliser la portée parent ou sa propre portée isolate dans la directive.
  • Meilleure réutilisation dans toute votre application


Mise à jour du 01/03/2016

Maintenant qu'Angular 2 se termine lentement, et nous connaissons le format général (bien sûr, il y aura encore des changements ici et là) je voulais juste ajouter à quel point il est important de faire components(parfois des directives si vous avez besoin qu'elles soient restrictives: '' E 'par exemple).

Les composants sont très similaires à Angular 2 @Component. De cette façon, nous encapsulons la logique et le HTML dans le même domaine.


Assurez-vous d'encapsuler autant de choses que possible dans les composants, cela rendra la transition vers Angular 2 beaucoup plus facile! (Si vous choisissez de faire la transition)

Voici un bel article décrivant ce processus de migration en utilisant directives(très similaire si vous alliez bien sûr utiliser des composants): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/

Mark Pieszak - Trilon.io
la source
5
Je suis d'accord avec cette réponse. La courbe d'apprentissage des directives est raide, mais elle est vraiment payante une fois que vous l'avez comprise.
Jazzy
@mcpDESIGNS, un cas qui ne correspond peut-être pas parfaitement à cette réponse (du moins pas les deux premiers paragraphes). Si j'ai un nav-partial, avec son propre contrôleur, et que je ne l'utiliserai qu'une seule fois (dans le fichier index.html), alors cela devrait probablement être un partiel et non une directive car il n'est utilisé qu'une seule fois (c'est sorte d'une application distincte dans le sens où elle n'est pas incluse dans le ngview), même si elle a sa propre logique. Ou?
EricC
Ceci est encore déroutant .. vous pouvez également spécifier un contrôleur lors de l'utilisation de ngInclude, regardez ceci: stackoverflow.com/questions/13811948/…
Marwen Trabelsi
1
Bien sûr, mais il est toujours complètement connecté au contrôleur parent d'une manière ou d'une autre. Où une directive peut créer un contrôleur en elle-même pour le chargement du modèle. Il peut être complètement séparé (si vous le souhaitez)
Mark Pieszak - Trilon.io
1
La meilleure chose à faire est d'abstraire ce concept dans une usine ou quelque chose du genre, de cette façon, vous pouvez simplement l'appeler depuis une linkfonction et le tour est joué! Cela aurait été bien intégré dans des directives, sans aucun doute :( @Arwin
Mark Pieszak - Trilon.io