AngularJS: ngInclude vs directive

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

Dois-je utiliser directive ou ngInclude pour cela?

    Tout dépend de ce que vous voulez de votre fragment de code. Personnellement, si le code n’a pas de logique, ou n’a même pas besoin d’un contrôleur, alors je vais avec ngInclude . Je mets généralement beaucoup plus de fragments HTML “statiques” que je ne veux pas encombrer la vue ici. (Par exemple, disons une grande table dont les données proviennent du contrôleur parent de toute façon. Il est plus propre d’avoir

    que toutes ces lignes qui encombrent la vue)

    S’il y a de la logique, de la manipulation DOM ou qu’il faut la personnaliser (autrement dit, le rendre différemment) dans différentes instances, les directives sont le meilleur choix (elles sont décourageantes au début, mais très puissantes). ).

    ngInclude

    Parfois, vous verrez ngInclude's qui sont affectés par leur extérieur $scope / interface . Comme un répéteur grand / compliqué peut dire. Ces 2 interfaces sont liées entre elles à cause de cela. Si quelque chose dans la $scope principale $scope change, vous devez modifier / modifier votre logique dans votre partiel inclus.

    Directives

    D’un autre côté, les directives peuvent avoir des étendues / contrôleurs / etc. explicites. Ainsi, si vous envisagez un scénario dans lequel vous devez réutiliser plusieurs fois, vous pouvez voir comment connecter sa propre scope rendrait la vie plus facile. 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 qui est quelque chose que vous voulez!

    Astuce: Assurez-vous de ne pas utiliser ressortingct: «E» si vous vous souciez d’IE8! Il y a des façons de contourner cela, mais elles sont agaçantes. Simplifiez-vous la vie et respectez l’atsortingbut / etc.

    Composants [Mise à jour 1/1/2016]

    Ajouté dans Angular 1.5, c’est essentiellement un wrapper autour de .directve() . Le composant doit être utilisé la plupart du temps. Il supprime beaucoup de code de directive ressortingct: 'E', scope : {}, bindToController: true par défaut des éléments tels que ressortingct: 'E', scope : {}, bindToController: true . Je recommande fortement 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 créer un modèle et avoir votre fichier en externe (comme ngInclude)
    • Vous pouvez choisir d’utiliser la scope parent ou sa propre scope d’ isolement dans la directive.
    • Meilleure réutilisation tout au long de votre application


    Mise à jour 01/03/2016

    Maintenant qu’Angular 2 se termine lentement, et que nous connaissons le format général (bien sûr, il y aura toujours des changements ici et là), je voulais juste append combien il est important de faire des components (parfois des directives si vous en avez besoin: ‘E’ par exemple).

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


    Assurez-vous d’encapsuler autant de choses que possible dans les composants, cela facilitera la transition vers Angular 2! (Si vous choisissez de faire la transition)

    Voici un bel article décrivant ce processus de migration à l’aide de directives (très similaires si vous utilisiez des composants bien sûr): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/