Lors de la définition de directives dans AngularJS, il existe trois façons différentes de transmettre des variables: aucune portée, portée héritée ou portée isolée. Que vous utilisiez ou non la syntaxe « controller as » (et j’espère que vous l’êtes), vous devez toujours décider lequel utiliser. Dans ce post, je vais expliquer les différences et suggérer pourquoi vous pourriez — ou non – vouloir utiliser chacune d’elles.

Pas de portée

 scope: false 

Utiliser ce type de portée de directive est généralement une mauvaise pratique à éviter. Lorsque vous choisissez cette option, vous spécifiez que votre directive n’a pas de portée propre et qu’elle partage une portée avec son contrôleur parent. Tout ce que le contrôleur parent mute ou ajoute à la portée sera présent dans la directive, et vice versa.

Mon précédent article de blog a démontré un exemple positif d’utilisation de scope: false dans les directives. Dans cet exemple, je l’ai utilisé pour échanger proprement DOM dans le modèle de ma directive de niveau supérieur, et toutes les directives servaient le même but simple (changer de super-héros) dans mon application. Je pense que scope: false peut être un excellent moyen d’introduire l’organisation et la lisibilité dans un modèle, mais au-delà de cela, son utilisation peut être une pente glissante vers le code spaghetti difficile à comprendre.

Portée héritée

scope: true

La portée héritée est beaucoup plus sûre pour les données de votre contrôleur parent qu’aucune portée. Comme avec l’option scope: false, tout ce qui existe sur la portée du contrôleur parent est présent dans la directive. Cependant, tout ce que la directive ajoute à la portée n’est pas partagé avec la portée parente. Cela protège les données du responsable du traitement parent tout en permettant leur partage avec la directive.

scope: true est utile dans les situations où la directive enfant sert à muter des données sur la portée parent. Bien que plus sûr que scope:false, l’utilisation de la portée héritée, en particulier à plusieurs reprises, est une odeur architecturale.

Portée isolée

scope: { myProperty: '='}

La portée isolée est la meilleure pratique de toutes. Avec cette option, le programmeur définit quels attributs sont transmis à la directive. Rien d’autre n’est partagé entre le contrôleur parent et la directive.

La portée isolée encourage (et impose) une bonne architecture de SPA et le développement de petits composants ciblés. L’utilisation d’une portée isolée (en particulier avec la syntaxe « controller as ») est un signe de bonne architecture, et il en résulte une directive qui sera facile à convertir en composant Angular 2.0.

So Alors, Que Dois-Je Utiliser?

Tout dépend ! Dans une application Angulaire parfaite, vous utiliseriez une portée isolée dans toutes vos directives. Cependant, toutes les applications ne sont pas parfaites et toutes les règles ne sont pas absolues.

  • L’utilisation d’aucune portée peut être utile pour organiser vos modèles.
  • L’utilisation de la portée héritée peut vous aider à refactoriser aucune directive de portée. Il est également utile pour gérer les architectures qui se concentrent sur la mutation des données dans l’arborescence de directives plutôt que de renvoyer de petits morceaux de données mises à jour dans l’arborescence au contrôleur parent.
  • Pour une migration angulaire 2.0 fluide, vous devez commencer à utiliser uniquement une portée isolée dans votre application.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.