Directive AngularJS Restreindre A vs E

113

Je travaille dans une petite équipe, construisant dans AngularJS et essayant de maintenir certaines normes de base et les meilleures pratiques; d'autant plus que nous sommes relativement nouveaux avec Angular.

Ma question concerne les directives. Plus précisément, les restrictoptions.

Certains d'entre nous utilisent restrict: 'E'ainsi avoir <my-directive></my-directive>dans le html.

D'autres utilisent restrict: 'A'et ont <div my-directive></div>dans le html.

Ensuite, bien sûr, vous pouvez utiliser restrict: 'EA'et utiliser l'un ou l'autre des éléments ci-dessus.

Pour le moment, ce n'est pas un gros problème, mais lorsque ce projet est aussi grand que prévu, j'aimerais que quiconque le regarde comprenne facilement ce qui se passe.

Y a-t-il des avantages / inconvénients à l'attribut ou à l'élément pour faire les choses?

Y a-t-il des écueils que nous devrions connaître si vous choisissez un élément plutôt qu'un attribut?

javascript html angularjs Darren Wainwright
la source

100

Selon la documentation :

Quand dois-je utiliser un attribut par rapport à un élément? Utilisez un élément lorsque vous créez un composant qui contrôle le modèle. Le cas courant pour cela est lorsque vous créez un langage spécifique au domaine pour certaines parties de votre modèle. Utilisez un attribut lorsque vous décorez un élément existant avec de nouvelles fonctionnalités.

Modifiez le commentaire suivant sur les pièges pour une réponse complète:

En supposant que vous construisez une application qui devrait fonctionner sur Internet Explorer <= 8, dont le support a été abandonné par l'équipe AngularJS d'AngularJS 1.3, vous devez suivre les instructions suivantes pour la faire fonctionner: https: //docs.angularjs .org / guide / ie

ngasull
la source

3

J'ai lu ces documents mais j'ai manqué celui-ci :) merci.

Darren Wainwright

3

Cette explication ne couvre pas les écueils et les avantages / inconvénients.

Konstantin Krass

J'ai mis à jour ma réponse en conséquence sur les pièges. Je n'ai pas mentionné les avantages / inconvénients car je pense que nous parlons davantage des meilleures pratiques ici, en particulier lorsqu'elles sont recommandées et expliquées par l'équipe Angular.

ngasull

1

"Je n'ai pas mentionné les avantages / inconvénients parce que je pense que nous parlons davantage des meilleures pratiques ici, surtout lorsqu'elles sont recommandées et expliquées par l'équipe Angular." hein? :)

Alexander Mills

169

restrict sert à définir le type de directive, et il peut être A(Attribute), C(Class), E(Element) et M(coMment), supposons que le nom de la directive soit Doc:

Type: utilisation

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

Seif Tamallah
la source

2

moins claire que la réponse de @nikunj, mais après avoir vu leur réponse, je comprends la vôtre ...

Alexander Mills

47

L'option restrict est généralement définie sur:

'A' - ne correspond qu'au nom d'attribut
'E' - ne correspond qu'au nom de l'élément
'C' - ne correspond qu'au nom de la classe
'M' - ne correspond qu'au commentaire

Voici le lien de documentation .

nikunj gandhi
la source

simple et propre

Gaurav_0093

7

L'élément n'est pas pris en charge dans IE8 dès la sortie de la boîte, vous devez effectuer quelques travaux pour que IE8 accepte les balises personnalisées.

Un avantage de l'utilisation d'un attribut sur un élément est que vous pouvez appliquer plusieurs directives au même nœud DOM. Ceci est particulièrement pratique pour des choses comme les contrôles de formulaire où vous pouvez mettre en évidence, désactiver ou ajouter des étiquettes, etc. avec des attributs supplémentaires sans avoir à envelopper l'élément dans un tas de balises.

Jack Allan
la source

5

L'un des pièges que je connais est le problème d'IE avec les éléments personnalisés. Comme cité dans la documentation :

3) vous n'utilisez pas de balises d'élément personnalisées telles que (utilisez plutôt la version d'attribut)

4) Si vous utilisez des balises d'élément personnalisées, vous devez suivre ces étapes pour rendre IE 8 et ci-dessous heureux

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

Khanh TO
la source

4

Piège:

L'utilisation de votre propre élément html comme <my-directive></my-directive>ne fonctionnera pas sur IE8 sans solution de contournement ( https://docs.angularjs.org/guide/ie )
L'utilisation de vos propres éléments html fera échouer la validation html.
Les directives avec un paramètre égal peuvent être faites comme ceci:

<div data-my-directive="ValueOfTheFirstParameter"></div>

Au lieu de cela:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

Nous n'utilisons pas d' éléments HTML personnalisés, car si ces 2 faits.

Chaque directive par framework tiers peut être écrite de deux manières:

<my-directive></my-directive>

ou

<div data-my-directive></div>

fait la même chose.

Konstantin Krass
la source

1

si vous souhaitez créer une directive avec un paramètre de portée égal à 1, il est plus facile de le faire avec A. Parce que vous n'avez pas besoin de créer un attribut supplémentaire.

Konstantin Krass

Qu'entendez-vous par supplémentaire? Les deux alternatives ont exactement un attribut.

un meilleur oliver

3

2 problèmes avec les éléments:

Mauvais support avec les anciens navigateurs.
SEO - le moteur de Google ne les aime pas.

Utilisez des attributs.

Amir Popovich
la source

Les directives en tant qu'éléments peuvent causer des problèmes de référencement? Je suis surpris. Et qu'en est-il de l' replaceattribut true?

chalasr

1

Ces revendications nécessitent des références. Le point 1 est assez bien établi ailleurs, mais j'aimerais voir des sources sur le point 2.

rinogo

Directive AngularJS Restreindre A vs E

Réponses: