web-dev-qa-db-ja.com

AngularJSディレクティブRestrict A vs E

私は小さなチームで働いており、AngularJSを構築して、いくつかの基本的な標準とベストプラクティスを維持しようとしています。特に、Angularが比較的新しいことを考えると。

私の質問は、指令に関するものです。より正確には、restrictオプション。

一部の人はrestrict: 'E'を使用しているため、htmlに<my-directive></my-directive>が含まれています。

他の人はrestrict: 'A'を使用し、htmlに<div my-directive></div>を持っています。

その後、もちろん、restrict: 'EA'を使用して上記のいずれかを使用できます。

現時点では大したことではありませんが、このプロジェクトの規模が大きくなると、それを見ている人に何が起こっているのかを簡単に理解してもらいたいと思います。

物事の属性または要素の方法に賛否両論はありますか？

属性よりも要素を言う場合、知っておくべき落とし穴はありますか？

javascripthtmlangularjs
106
Darren Wainwright

ドキュメント によると：

要素と属性のどちらを使用すべきか？テンプレートを制御するコンポーネントを作成するときに要素を使用します。これの一般的なケースは、テンプレートの一部にドメイン固有言語を作成する場合です。既存の要素を新しい機能で装飾するときに属性を使用します。

完全な答えを得るために落とし穴に関する以下のコメントを編集してください：

AngularJS 1.3からAngularJSチームによってサポートが削除されたInternet Explorer 8以上で実行するアプリを構築していると仮定すると、動作させるために次の指示に従う必要があります： https：/ /docs.angularjs.org/guide/ie

96
blint

restrictは、ディレクティブのタイプを定義するためのものであり、Aname__（属性）、Cname__（クラス）、Ename__（要素）、およびMname__（coMment）にすることができます。ディレクティブの名前をDocname__と仮定しましょう

タイプ：使用法

A = <div Doc></div>

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

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

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

155
Seifedine Tamallah

通常、制限オプションは次のように設定されます。

  • 'A'-属性名のみに一致
  • 'E'-要素名のみに一致
  • 'C'-クラス名のみに一致
  • 'M'-コメントのみに一致

ドキュメントリンク です。

44
nikunj gandhi

IE8ではカスタム要素をサポートしていません。IE8がカスタムタグを受け入れるようにするための作業が必要です。

要素に対して属性を使用する利点の1つは、複数のディレクティブを同じDOMノードに適用できることです。これは、フォームコントロールなど、タグをまとめて要素をラップせずに追加の属性を持つラベルなどを強調表示、無効化、または追加できる場合に特に便利です。

7
Jack Allan

私が知っている落とし穴の1つは、カスタム要素のIE問題です。 docs から引用したとおり：

3）しない（カスタム属性タグを代わりに使用する）などのカスタム要素タグを使用する

4）カスタム要素タグを使用する場合は、これらの手順を実行してIE 8以下を満足させる必要があります

<!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

落とし穴：

  1. <my-directive></my-directive>のような独自のhtml要素を使用すると、回避策なしではIE8で動作しません（ https://docs.angularjs.org/guide/ie ）
  2. 独自のhtml要素を使用すると、html検証が失敗します。
  3. 1つのパラメーターが等しいディレクティブは、次のように実行できます。

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

これの代わりに：

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

私たちdontは、カスタムHTML要素を使用します。

サードパーティのフレームワークによるすべてのディレクティブは、2つの方法で記述できます。

<my-directive></my-directive>

または

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

同じことをします。

4
Konstantin Krass

要素に関する2つの問題：

  1. 古いブラウザでの悪いサポート。
  2. SEO-Googleのエンジンはそれらを好まない。

属性を使用します。

3
Amir Popovich