AngularJSディレクティブとは何ですか？

AngularJSのドキュメントといくつかのチュートリアルを読むのにかなりの時間を費やしてきましたが、ドキュメントがどれほど近づき難いかに驚いています。

私は、AngularJSを入手しようとしている他の人にも役立つかもしれない、簡単で答えられる質問があります。

AngularJSディレクティブとは何ですか？

ディレクティブのどこかにシンプルで正確な定義があるはずですが、AngularJSのWebサイトでは、これらの驚くほど役に立たない定義が提供されています。

ホームページ：

ディレクティブは、AngularJSで利用できるユニークで強力な機能です。ディレクティブを使用すると、アプリケーションに固有の新しいHTML構文を作成できます。

では開発者ドキュメント：

ディレクティブは、HTMLの新しいトリックを教える方法です。DOMコンパイル中に、ディレクティブはHTMLと照合されて実行されます。これにより、ディレクティブで動作を登録したり、DOMを変換したりできます。

そして、皮肉にも、聴衆がそれらが何であるかをすでに理解していると想定しているように見える指令についての一連の話があります。

だれでも、明確な参照のために、指令が説明するものの正確な定義を提供できますか？

1. それは何か（例としてjQueryの明確な定義を参照）
2. 対処することを意図している実際的な問題と状況
3. それが具現化する設計パターン、またはAngularJSのMVC / MVWとされるミッションにどのように適合するか。

それは何ですか（例としてjQueryの明確な定義を見てください）？

ディレクティブは、本質的には、AngularコンパイラーがDOMでそれを見つけたときに実行される関数^†です。関数はほとんど何でもできるので、ディレクティブとは何かを定義するのはかなり難しいと思います。各ディレクティブには名前（ng-repeat、tabs、make-up-your-ownなど）があり、各ディレクティブはそれが使用できる場所（要素、属性、クラス）をコメントで決定します。

^†ディレクティブには通常、（ポスト）リンク機能しかありません。複雑なディレクティブには、コンパイル関数、プリリンク関数、ポストリンク関数を含めることができます。

どのような実際的な問題と状況に対処することを意図していますか？

ディレクティブが実行できる最も強力なことは、HTMLを拡張することです。拡張機能は、アプリケーションを構築するためのドメイン固有言語（DSL）です。たとえば、アプリケーションがオンラインショッピングサイトを実行している場合、HTMLを拡張して、「ショッピングカート」、「クーポン」、「スペシャル」などのディレクティブを含めることができます。「 「div」や「span」ではなく、「オンラインショッピング」ドメイン（@WTKで既に述べたように）。

ディレクティブはHTMLをコンポーネント化することもできます-一連のHTMLをいくつかの再利用可能なコンポーネントにグループ化します。ng-includeを使用して多くのHTMLを取り込む場合は、おそらくディレクティブにリファクタリングするときです。

それが具体化する設計パターンは何ですか、あるいは、angularjsのMVC / MVWとされるミッションにどのように適合するか

ディレクティブは、DOMを操作し、DOMイベントをキャッチする場所です。これが、ディレクティブのコンパイル関数とリンク関数の両方が引数として「要素」を受け取る理由です。あなたはできる

• ディレクティブを置き換えるHTML（つまりテンプレート）の束を定義する
• イベントをこの要素（またはその子）にバインドします
• クラスを追加/削除する
• text（）値を変更する
• 同じ要素で定義された属性の変更を監視します（監視されるのは実際には属性の値です。これらはスコーププロパティであるため、ディレクティブは「モデル」の変更を監視します）
• 等

たぶん角度指令の本当に簡単で初期の定義は

AngularJSディレクティブ（ng-directives）は、HTMLを拡張するためにAngularで使用されるngプレフィックス（ng-model、ng-app、ng-repeat、ng-bind）を持つHTML属性です。（から：W3schools角チュートリアル）

これのいくつかの例は

NG-アプリのディレクティブは、AngularJSアプリケーションを定義します。

NG-モデルディレクティブは、アプリケーションデータへのHTMLコントロール（入力、選択し、テキストエリア）の値をバインドします。

NG-バインド HTMLビューに指示バインドアプリケーションデータ。

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

このチュートリアルを確認してください。少なくとも私にとっては、Angularの最高の紹介の1つでした。より完全なアプローチは、@ mark-rajcokが以前に言ったことすべてです。

ドキュメントを見ると、ディレクティブは、angularjsがオブジェクトと動作を作成するために解析するように記述できる構造です。つまり、データの任意のノードと疑似JavaScriptとプレースホルダーを組み合わせて使用​​する方法の意図を表すテンプレートです。ウィジェット（コンポーネント）の構造、動作、データのフィード方法。次に、Angularjsはそれらのディレクティブに対して実行され、それらを実際のhtml / javascriptコードに変換します。

ディレクティブは、適切なセマンティクスを使用してより複雑なコンポーネント（ウィジェット）を構築できるようにするためのものです。ディレクティブのangularjsの例を見てみましょう-それらはタブペインを定義しています（これは通常のHTMLではもちろん有効ではありません）。div-sやspanなどを使用して構造を作成するよりも直感的で、タブペインのようにスタイル設定されます。

AngularJSのディレクティブは、AngularJSのHTMLコンパイラ（$コンパイル）、そのDOM要素に対して指定された動作を実行するか、DOM要素とその子を変換します。いくつかの例はng-bind、ng-hide / showなどです。

ホームページはこれについて非常に明確です：前のセクションのタブにカーソルを合わせると：

HTMLの語彙をカスタムtabs 要素で拡張しました。tabsタブのレンダリングに必要な複雑なHTMLの構造と動作を抽象化します。その結果、より読みやすいビューと非常に簡単に再利用可能な構文になります。」

次に、次のタブで：

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

つまりtabs、html要素を発明して、angularにそれらの要素のレンダリングを処理させることができます。