AngularJSでカスタムディレクティブを作成する方法：ステップバイステップの説明

Angular JSでHTMLの機能を拡張するために、customsディレクティブが使用されます。 ディレクティブは、目的の関数を介してHTML機能を拡張するためにユーザーによって定義されます。 税関指令が生成される要素はすべて、それによって置き換えられます。 Angular JSには多くのディレクティブが存在しますが、カスタムディレクティブが必要な場合があります。

次の要素は、AngularJSによるカスタムディレクティブの作成に使用できます。 ディレクティブのアクティブ化は、ディレクティブのタイプに基づいています。

• 要素ディレクティブ：一致する要素がある場合は常に、ディレクティブのアクティブ化が行われます。
• 属性：属性が一致すると、ディレクティブがアクティブになります。
• CSS：CSSスタイルのマッチングにより、ディレクティブがアクティブになります。
• コメント：一致するコメントが見つかると、ディレクティブがアクティブになります。

モジュールを指令のモジュールに登録する

モジュールをディレクティブに登録するためのプログラム

ソース

モジュールでdirective（）関数呼び出しが行われました。 この呼び出しにより、新しいディレクティブを登録できます。

登録するディレクティブには、関数の最初のパラメーターとして使用される特定の名前があります。 この名前は、ユーザーがディレクティブをアクティブ化するときにHTMLテンプレートに表示されます。 コードでは、「div」という名前が使用されています。 これは、「div」という名前のHTML要素がHTMLテンプレートの要素と一致するたびに、ディレクティブがアクティブ化されることを意味します。

ファクトリ関数は、関数ディレクティブの2番目のパラメーターとして使用されます。 関数を呼び出すと、ディレクティブ定義が返されます。 この関数はAngularJSによって呼び出され、ディレクティブ定義を含むJavaScriptのオブジェクトを返します。 上記のコードは、JavaScriptオブジェクトの戻り値を示しています。

返されたオブジェクトには2つのプロパティがあります。 制限、およびテンプレートフィールド。

ディレクティブのアクティブ化の後にHTML要素の一致が続くか、属性の一致が続くかは、restrictフィールドによって設定されます。 ディレクティブをHTML要素でアクティブ化するかどうかは、restrictをEに設定し、Aに設定することで指定できます。ユーザーは、要素の属性マッチングによってのみディレクティブをアクティブ化するように指定できます。 両方のAEを指定すると、HTML要素と属性の両方を一致させることができます。

もう1つのプロパティ、つまりテンプレートフィールドは、一致するdiv要素の内容の置き換えに関係します。

HTMLページのHTMLが次のような場合

追加されたディレクティブのアクティブ化は、div要素がAngularJSによって検出されたときに実行されます。

Angularでのデータバインディング

バインディングデータの意味は、角度データバインディングの概念を理解する前に知っておく必要があります。 データの値が変更されると、データにバインドされている要素が自動的に変更されます。 一方向の場合もあれば、双方向のプロセスの場合もあります。 Angularデータバインディングには4つのタイプがあります。 補間、プロパティバインディング、イベントバインディング、および双方向データバインディング。

読む：AngularとAngularJの違い

カスタムディレクティブの作成

カスタム属性ディレクティブの作成に関連するいくつかのステップは次のとおりです。

ステップ1：ディレクティブは、@Directiveデコレータを使用してクラスデコレーションによって作成されます。

ステップ2：レンダラーとサービスElementRefが挿入されます。

ステップ3：ディレクティブをモジュールに登録します。

ステップ4：ディレクティブを使用します。

• HTMLの要素にカスタムディレクティブを適用すると、その要素は「HOSTELEMENT」として知られるようになります。

この例では、AngularJSでのカスタムディレクティブの作成を示します。 ディレクティブが呼び出されると、divタグが挿入されます。

カスタムディレクティブを作成するためのコードの例

ソース

コードの説明：

• モジュールは、Angularを適用するために最初に作成されます。 このモジュールを使用するとカスタムディレクティブが作成されるため、モジュールの作成はカスタムディレクティブを作成するために重要です。
• 'ngGuru'という名前のカスタムディレクティブが作成され、ディレクティブのカスタムコードを含む関数が定義されます。
• • ディレクティブを定義すると、文字GはngGuruで大文字になります。 divタグからアクセスしている間、名前はng-guruのままです。 アプリケーションで定義されているカスタムディレクティブは、この形式で角度を付けて理解されます。 文字「ng」はカスタムディレクティブの名前の前に付けられ、ディレクティブが呼び出されるときは常にハイフン記号（–）を使用する必要があります。 最後に、「ng」に続く文字は、ディレクティブが定義されている間は小文字または大文字にすることができます。

• パラメータは角度によって定義されます。つまり、テンプレートパラメータが使用されます。 ディレクティブが使用される場合は常に、コードの呼び出し中にテンプレート値が使用および挿入されるように定義されています。
• このプログラムは、カスタム作成された「ng-guru」ディレクティブを利用しています。 これを行っている間、テンプレート値がここに挿入されます。

コードが正常に実行されると、次の出力が生成されます。

コードの出力

ソース

出力では、カスタムディレクティブ、つまりng-guruが定義されたテンプレートとともに表示されます。 テンプレートは、カスタムテキストを表示するために定義されています。

AngularJSディレクティブの範囲

コントローラは、コントローラとビューの間のデータの流れを管理するスコープを介してビューにバインドされます。 角度のカスタムディレクティブは、デフォルトで、親コントローラーに含まれているスコープオブジェクトにアクセスしています。 したがって、このプロセスは、コントローラーに渡されるデータをカスタムディレクティブで使用できる簡単なプロセスになります。

カスタムディレクティブでのスコープの使用を示すために、角度のあるカスタムディレクティブの例を以下に示します。 コードの例

ソース

コードの説明

• 「DemoController」という名前のコントローラーが最初に作成されます。 名前の変数

'tutorialName'はコントローラーで定義され、スコープにアタッチされます。 使用されるコマンドは次のとおりです。

$ scope.tutorialName =“ AngularJS”。

• 変数「tutorialName」は、式を使用してカスタムディレクティブで呼び出すことができます。 変数は「DemoController」で定義されているため、アクセス可能になります。 ディレクティブの場合、「DemoController」、=が親になります。
• コントローラは、親divタグになるdivタグで参照されます。 カスタムディレクティブが変数'tutorialName'にアクセスできるように、すべてを最初に実行する必要があります。
• 最後に、「ng-guru」であるカスタムディレクティブがdivタグに付加されます。
• コードが正常に実行されると、次の出力が生成されます。

上記のコードの出力

ソース

出力では、スコープ変数であるtutorialNameが「ng-guru」であるカスタムディレクティブによって使用されていることがわかります。

ディレクティブでのイベント処理

マウスクリックやボタンのクリックなどのイベントの処理は、ディレクティブ内から実行できます。 リンク関数は、イベントを処理するために使用されます。 ディレクティブは、リンク関数を介してHTMLのページ内のDOMの要素にアタッチされます。

リンクに使用される構文は次のとおりです。link：function（$ scope、element、attrs）。

リンク関数は3つのパラメーターを受け入れます。 スコープ、要素、および属性。

したがって、

• 角度のメインアプリケーションでコードを挿入するためのカスタムディレクティブを作成できます。
• メンバーは、カスタムディレクティブによって呼び出すことができます。 これらのメンバーは、コントローラー内のオブジェクトのスコープ内で定義されます。 使用されるキーワードは、「controller」、キーワードcontrollerAs'、およびキーワード「template」です。
• 組み込み機能は、ディレクティブをネストすることで提供できます。
• ディレクティブを再利用可能にすることで、共通のコードを挿入できます。
• HTMLのカスタムタグは、カスタムディレクティブを介して作成できます。 これらのタグには独自の機能があり、要件として定義されます。
• +DOMイベントはディレクティブから処理できます。

世界のトップ大学からオンラインでソフトウェアコースを学びましょう。 エグゼクティブPGプログラム、高度な証明書プログラム、または修士プログラムを取得して、キャリアを早急に進めましょう。

結論

anglejsのカスタムディレクティブは、 angularでHTML機能を拡張するために使用されます。 このタイプのカスタムディレクティブの作成については、角度のあるカスタムディレクティブの例を使用した記事で説明しています。 全体として、プログラミングの概念の一部に触れています。 ただし、ソフトウェア開発の専門家になりたい場合は、ソフトウェア業界で適用されるプログラミングのスキルを習得する必要があります。 これを考慮して、 upGradが提供するソフトウェア開発のエグゼクティブPGプログラム–フルスタック開発の専門分野のコースを確認できます。 13か月のプログラムは、21〜45歳以内で、ソフトウェア開発部門での幸運を待っている中堅レベルの専門家向けに設計されています。 16を超えるプログラミング言語とツール、オンラインセッション、およびリーダーによるクラスを備えたこのコースでは、トップ業界での配置を保証します。 興味のある方は、詳しくは弊社チームまでお問い合わせください。 お手伝いさせていただきます。