184

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

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

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

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

ホームページ：

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

開発者向けドキュメント：

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

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

明確な参照のために、誰もが説明するディレクティブが何であるかについての正確な定義を提供することができますか？

  1. それは何ですか（例としてjQueryの明確な定義を参照してください）
  2. どのような実際的な問題と状況に対処することを目的としていますか
  3. それが具体化するデザインパターン、あるいは、AngularJSのMVC/ MVWミッションと称されるものにどのように適合するか。
4

5 に答える 5

143

それは何ですか（例として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（）値を変更する
  • 同じ要素で定義された属性への変更を監視します（実際には、監視されるのは属性の値です。これらはスコーププロパティであるため、ディレクティブは変更を「モデル」で監視します）
  • 等

<a href="...">HTMLには、、、、<img src="...">の ようなものが<br>あり<table><tr><th>ます。a、href、img、src、br、table、tr、thをどのように説明しますか？それがディレクティブです。

于 2012-12-16T02:23:30.177 に答える
11

たぶん、角度ディレクティブの本当に単純で初期の定義は次のようになります

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

これのいくつかの例は

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

ng-modelディレクティブは、HTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドします。

ng-bindディレクティブは、アプリケーションデータをHTMLビューにバインドします。

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

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

于 2014-09-10T07:16:44.543 に答える
4

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

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

于 2012-12-14T09:08:24.653 に答える
3

AngularJSのディレクティブは、属性（restrict- A）、要素名（restrict- E）、コメント（restrict- M）、CSSクラス（restrict-C）などのHTMLDOM要素のhtmlreマーカーであり、AngularJSのHTMLコンパイラー（$コンパイル）、そのDOM要素に対して指定された動作を実行したり、DOM要素とその子を変換したりします。いくつかの例としては、ng-bind、ng-hide/showなどがあります。

于 2015-05-14T06:48:33.090 に答える
2

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

tabs カスタム要素を使用してHTMLの語彙を拡張しました。タブの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;
        }

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

于 2012-12-14T09:13:15.393 に答える