web-dev-qa-db-ja.com

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

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

私は、AngularJSを手に入れようとする他の人にも役立つかもしれない、シンプルで答えのできる質問があります。

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

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

ホームページ上 ：

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

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

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

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

明確な参照のために、誰が説明するディレクティブの正確な定義を提供できるでしょうか？

  1. それが何であるか（例として jQueryの定義 を参照）
  2. どのような実際的な問題と状況に対処することが意図されているか
  3. それが具体化するデザインパターン、またはその代わりに、AngularJSのMVC/ MVW ミッションに適合する方法。
javascriptangularjsangular-directive
178
tohster

たぶんangularディレクティブの本当にシンプルで初期の定義は

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

これのいくつかの例は

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

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

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が以前に言ったことすべてです。

11
jplozgom

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

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

4
WTK

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

3
Vivek Panday

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

カスタムの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にこれらの要素のレンダリングを処理させることができます。

2
raam86