web-dev-qa-db-fra.com

Directive AngularJS Restreindre A vs E

Je travaille dans une petite équipe, bâtissant dans AngularJS et essayant de maintenir certaines normes de base et meilleures pratiques; surtout étant donné que nous sommes relativement nouveaux avec Angular.

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

Certains d’entre nous utilisent restrict: 'E' et ont donc <my-directive></my-directive> dans le code HTML.

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

Ensuite, bien sûr, vous pouvez utiliser restrict: 'EA' et utiliser l’un des choix ci-dessus.

Pour le moment, ce n'est pas grave, mais lorsque ce projet sera aussi ambitieux que possible, j'aimerais que quiconque l'examinera comprenne facilement ce qui se passe.

Existe-t-il des avantages/inconvénients pour l'attribut ou la manière de faire des éléments?

Y a-t-il des pièges que nous devrions connaître, si vous choisissez de choisir élément sur attribut?

javascripthtmlangularjs
110
Darren Wainwright

Selon la documentation :

Quand dois-je utiliser un attribut par rapport à un élément? Utilisez un élément lors de la création d'un composant contrôlant le modèle. Le cas courant pour cela est lorsque vous créez un langage spécifique à un domaine pour des parties de votre modèle. Utilisez un attribut lorsque vous décorez un élément existant avec une nouvelle fonctionnalité.

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

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

98
blint

restrict est utilisé pour définir le type de directive, et il peut s'agir de A (attribut), C (classe), E (élément) et M (composant), supposons que le nom de la directive est Doc:

Type: Utilisation

A = <div Doc></div>

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

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

M = <!--directive:Doc -->

161
Seifedine Tamallah

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

  • 'A' - correspond uniquement au nom de l'attribut
  • 'E' - correspond uniquement au nom de l'élément
  • 'C' - correspond uniquement au nom de la classe
  • 'M' - ne correspond qu'à un commentaire

Voici le lien vers la documentation .

45
nikunj gandhi

Élément n'est pas pris en charge dans IE8 prêt à l'emploi, vous devez faire quelques efforts pour que IE8 accepte les balises personnalisées.

L'utilisation d'un attribut par rapport à un élément présente l'avantage de pouvoir appliquer plusieurs directives au même nœud DOM. Ceci est particulièrement utile pour des éléments tels que les contrôles de formulaire où vous pouvez mettre en surbrillance, désactiver ou ajouter des étiquettes, etc. avec des attributs supplémentaires sans avoir à envelopper l'élément dans un groupe de balises.

7
Jack Allan

Un des pièges que je connais est le problème IE avec les éléments personnalisés. Comme cité dans le docs :

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

4) si vous utilisez des balises d'élément personnalisé , vous devez suivre ces étapes pour rendre heureux les IE 8 et les versions antérieures

<!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>
5
Khanh TO

Piège:

  1. Utiliser 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 )
  2. L'utilisation de vos propres éléments HTML fera échouer la validation HTML.
  3. 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 des éléments HTML personnalisés, car si cela est 2 faits.

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

<my-directive></my-directive>

ou

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

fait la même chose.

4
Konstantin Krass

2 problèmes avec les éléments:

  1. Mauvais support avec les anciens navigateurs.
  2. SEO - Le moteur de Google ne les aime pas.

Utiliser des attributs.

3
Amir Popovich