AngularJS のカスタムディレクティブ: 作成方法【例】

カスタムディレクティブとは何ですか?

A カスタムディレクティブ AngularJS のは、ユーザーが HTML 機能を拡張するために希望する機能を使用できるようにするユーザー定義のディレクティブです。これは「directive」関数を使用して定義でき、使用される要素を置き換えます。AngularJS にはすぐに使用できる強力なディレクティブが多数ありますが、カスタムディレクティブが必要になる場合もあります。

カスタムディレクティブを作成するにはどうすればよいですか?

AngularJS カスタムディレクティブを作成する方法の例を見てみましょう。

この場合のカスタムディレクティブは、ディレクティブが呼び出されたときに、「AngularJS Tutorial」というテキストを含む div タグをページに挿入するだけです。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.directive('ngGuru',function(){

    return {
        template: '<div>Angular JS Tutorial</div>'
    }
    });

</script>

</body>
</html>

コードの説明

最初に作成しているのは、モジュール角度のあるアプリケーションの場合。カスタムディレクティブはこのモジュールを使用して作成されるため、これはカスタムディレクティブを作成するために必要です。
現在、「ngGuru」というカスタムディレクティブを作成し、ディレクティブのカスタムコードを持つ関数を定義しています。注： - ディレクティブを定義するときに、文字「G」を大文字にして ngGuru として定義していることに注意してください。また、div タグからディレクティブとしてアクセスする場合は、ng-guru としてアクセスします。これは、Angular がアプリケーションで定義されたカスタムディレクティブを理解する方法です。まず、カスタムディレクティブの名前は文字「ng」で始まる必要があります。次に、ハイフン記号「-」は、ディレクティブを呼び出すときにのみ指定する必要があります。そして 3 番目に、ディレクティブを定義するときに文字「ng」に続く最初の文字は、小文字でも大文字でもかまいません。
カスタムディレクティブ用に Angular によって定義されたパラメータであるテンプレートパラメータを使用しています。ここでは、このディレクティブが使用されるたびに、テンプレートの値を使用して呼び出しコードにそれを挿入することを定義しています。
ここでは、カスタムで作成した「ng-guru」ディレクティブを利用しています。これを行うと、テンプレートに定義した値「 Angular JS チュートリアル” がここに注入されます。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

上記の出力は、カスタムテキストを表示するためのテンプレートが定義されたカスタム ng-guru ディレクティブがブラウザーに表示されることを明確に示しています。

AngularJs ディレクティブとスコープ

スコープは、ビューとコントローラーの間のデータを管理することによってコントローラーをビューにバインドする接着剤として定義されます。

カスタム AngularJs ディレクティブを作成すると、デフォルトで親コントローラーのスコープオブジェクトにアクセスできるようになります。

このようにして、カスタムディレクティブがメインコントローラーに渡されるデータを利用することが容易になります。

カスタムディレクティブで親コントローラーのスコープを使用する方法を示す、AngularJS カスタムディレクティブの例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {
        $scope.tutorialName = "Angular JS";

    });

        app.directive('ngGuru',function(){
        return {
         template: '<div>{{tutorialName}}</div>'
     }
    });

</script>

</body>
</html>

コードの説明

まず、「DemoController」というコントローラーを作成します。ここでは、tutorialName という変数を定義し、それを XNUMX つのステートメント $scope.tutorialName = “AngularJS” でスコープオブジェクトにアタッチします。
カスタムディレクティブでは、式を使用して変数「tutorialName」を呼び出すことができます。この変数は、このディレクティブの親となるコントローラー「DemoController」で定義されているため、アクセス可能です。
div タグでコントローラーを参照し、親 div タグとして機能します。カスタムディレクティブがtutorialName変数にアクセスするには、これを最初に行う必要があることに注意してください。
最後に、カスタムディレクティブ「ng-guru」を div タグに添付するだけです。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

上記の出力は、カスタムディレクティブ「ng-guru」が親コントローラーのスコープ変数tutorialNameを使用していることを明確に示しています。

ディレクティブを含むコントローラーの使用

Angular は次のような機能を提供します。 カスタムディレクティブからコントローラーのメンバー変数に直接アクセスします スコープオブジェクトは必要ありません。

アプリケーションには複数のコントローラーに属する複数のスコープオブジェクトがある可能性があるため、これが必要になる場合があります。

したがって、間違ったコントローラーのスコープオブジェクトにアクセスするという間違いを犯す可能性が高くなります。

このようなシナリオでは、ディレクティブで「この特定のコントローラーにアクセスしたい」と具体的に言及する方法があります。

これを実現する方法の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div ng-guru99=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function() {
        this.tutorialName = "Angular";

    });

     app.directive('ngGuru99',function(){
        return {
         controller: 'DemoController',

          controllerAs: 'ctrl',

          template: '{{ctrl.tutorialName}}'
     };
    });

</script>

</body>
</html>

コードの説明

まず、「DemoController」というコントローラーを作成します。ここでは、「tutorialName」という変数を定義します。今回は、それをスコープオブジェクトにアタッチする代わりに、コントローラーに直接アタッチします。
カスタムディレクティブでは、コントローラーパラメーターキーワードを使用して、コントローラー「DemoController」を使用することを具体的に示しています。
「controllerAs」パラメータを使用して、コントローラへの参照を作成します。これはAngularで定義されており、コントローラーをリファレンスとして参照する方法です。

注意： -ディレクティブ内でコントローラー、controllerA、テンプレートステートメントの各ブロックを指定することで、複数のコントローラーにアクセスできます。

最後に、テンプレートでは、ステップ 3 で作成した参照を使用し、ステップ 1 でコントローラーに直接アタッチされたメンバー変数を使用します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力は、カスタムディレクティブが特に DemoController とそれにアタッチされたメンバー変数tutorialName にアクセスし、「Angular」というテキストを表示していることを明確に示しています。

再利用可能なディレクティブを作成する方法

カスタムディレクティブの威力についてはすでに説明しましたが、再利用可能な独自のディレクティブを構築することで、それを次のレベルに進めることができます。

たとえば、複数の画面にわたって常に以下の HTML タグを表示するコードを挿入したいとします。これは基本的にユーザーの「名前」と「年齢」を入力するだけです。

毎回コーディングせずにこの機能を複数の画面で再利用するには、これらのコントロール (ユーザーの「名前」と「年齢」) を保持するマスターコントロールまたはディレクティブを Angular で作成します。

したがって、以下の画面に毎回同じコードを入力する代わりに、実際にこのコードをディレクティブに埋め込み、いつでもそのディレクティブを埋め込むことができます。

これを実現する方法の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru=""></div>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            template: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

コードの説明

カスタムディレクティブのコードスニペットでは、変更されるのはカスタムディレクティブのテンプレートパラメーターに指定された値だけです。プラン 2 のタグまたはテキストの代わりに、実際には「」の XNUMX つの入力コントロールのフラグメント全体を入力しています。名前」と「年齢」をページに表示する必要があります。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

上記の出力から、カスタムディレクティブのテンプレートのコードスニペットがページに追加されたことがわかります。

AngularJS ディレクティブとコンポーネント – ng-transclude

かなり前に述べたように、Angular は次の機能を拡張することを目的としています。 HTML。そして、再利用可能なカスタムディレクティブを使用してコードインジェクションを行う方法をすでに見てきました。

しかし、現代の Web アプリケーション開発では、Web コンポーネントを開発するという概念もあります。これは基本的に、コード内のコンポーネントとして使用できる独自の HTML タグを作成することを意味します。

したがって、Angular は、HTML タグ自体に属性を挿入する機能を提供することで、HTML タグを拡張するための別のレベルの機能を提供します。

これは「」によって行われます。ng-トランスクルード” タグ。これは、マークアップのディレクティブ内にあるすべてのものをキャプチャするように Angular に指示する一種の設定です。

これを実現する方法の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <pane title="{{title}}">Angular JS</pane>

</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('pane',function(){
        return {

            transclude:true,
            scope :{title:'@'},
            template: '<div style="border: 1px solid black;"> '+
                        '<ng-transclude></ng-transclude>'+
                            '</div>'
        };
    });

</script>

</body>
</html>

コードの説明

ディレクティブを使用して「pane」というカスタム HTML タグを定義し、このタグにカスタムコードを挿入する関数を追加しています。出力では、カスタムペインタグによって、黒の実線の境界線が付いた四角形の中に「AngularJS」というテキストが表示されます。
「transclude」属性は true として指定する必要があります。これは、Angular がこのタグを DOM に挿入するために必要です。
スコープでは、title 属性を定義しています。属性は通常、name=”value” のような名前と値のペアとして定義されます。この例では、ペイン HTML タグの属性の名前は「title」です。「@」記号は angular からの要件です。これは、ステップ 5 で行 title={{title}} が実行されるときに、title 属性のカスタムコードがペイン HTML タグに追加されるようにするために行われます。
コントロールに黒の実線を描画するだけのタイトル属性のカスタムコード。
最後に、定義された title 属性とともにカスタム HTML タグを呼び出します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力は、ペイン html5 タグの title 属性がカスタム値「Angular.JS」に設定されていることを明確に示しています。

ネストされたディレクティブ

AngularJS のディレクティブはネストできます。内部モジュールや関数と同様に、プログラミング言語、相互にディレクティブを埋め込む必要がある場合があります。

以下の例を見ると、これについてよりよく理解できます。

この例では、「outer」と「inner」という 2 つのディレクティブを作成しています。

inner ディレクティブは、「Inner」というテキストを表示します。
一方、外側のディレクティブは実際には内側のディレクティブを呼び出して、「Inner」というテキストを表示します。

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <outer></outer>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('outer',function(){
        return {

            restrict:'E',
            template: '<div><h1>Outer</h1><inner></inner></div>',
        }});

    app.directive('inner',function(){
        return {

            restrict:'E',
            template: '<div><h1>Inner</h1></div>',
        }
    });
</script>

</body>
</html>

コードの説明

親ディレクティブとして動作する「outer」というディレクティブを作成しています。このディレクティブは、「内部」ディレクティブを呼び出します。
angular では、内部ディレクティブのデータを外部ディレクティブで確実に利用できるようにするために、restrict:'E' が必要です。文字「E」は「Element」という単語の短縮形です。
ここでは、div タグにテキスト「Inner」を表示する inner ディレクティブを作成しています。
外側のディレクティブのテンプレート (ステップ #4) では、内側のディレクティブを呼び出しています。ここでは、内部ディレクティブから外部ディレクティブにテンプレートを挿入しています。
最後に、外部ディレクティブを直接呼び出しています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

外側のディレクティブと内側のディレクティブの両方が呼び出され、両方の div タグ内のテキストが表示されていることがわかります。

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

イベントこのようなマウスクリックやボタンクリックはディレクティブ自体の内部から処理できます。これはリンク機能を使用して行われます。リンク関数を使用すると、ディレクティブ自体を HTML ページ内の DOM 要素に付加できます。

構文：

link要素の構文は以下のとおりです。

NGリピート

link: function ($scope, element, attrs)

リンク関数は通常、スコープ、ディレクティブが関連付けられている要素、ターゲット要素の属性を含む 3 つのパラメータを受け入れます。

これを実現する方法の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp">
    <div ng-guru="">Click Me</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.directive('ngGuru',function(){
        return {

            link:function($scope,element,attrs) {
                element.bind('click',function () {
                    element.html('You clicked me');
                });}
        }});
</script>

</body>
</html>

コードの説明

HTML DOM 内のイベントにアクセスするディレクティブの機能を提供するために、angular で定義されているリンク関数を使用しています。
HTML DOM 要素 (この場合は「div」要素) のイベントに応答したいため、「element」キーワードを使用しています。次に、「バインド」関数を使用して、要素のクリックイベントにカスタム機能を追加したいとしています。「クリック」という単語はキーワードであり、HTML コントロールのクリックイベントを示すために使用されます。たとえば、HTML ボタンコントロールにはクリックイベントがあります。この例では、「dev」タグのクリックイベントにカスタムコードを追加したいため、「click」キーワードを使用します。
ここでは、要素 (この場合は div 要素) の内部 HTML を「You clicked me!」というテキストに置き換えたいと言っています。
ここでは、ng-guru カスタムディレクティブを使用するように div タグを定義しています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

最初は、「Click Me」というテキストがユーザーに表示されます。これは、最初に div タグで定義されているためです。実際に div タグをクリックすると、以下の出力が表示されます。

製品概要

メインの Angular アプリケーションにコードを挿入するために使用できるカスタムディレクティブを作成することもできます。
「Controller」、「controllerAs」、および「template」キーワードを使用して、特定のコントローラーのスコープオブジェクトで定義されたメンバーを呼び出すカスタムディレクティブを作成できます。
ディレクティブをネストして、アプリケーションのニーズに応じて必要となる埋め込み機能を提供することもできます。
ディレクティブは再利用可能にすることもできるため、さまざまな Web アプリケーションで必要になる可能性のある共通のコードを挿入するために使用できます。
ディレクティブを使用して、ビジネス要件に従って定義された独自の機能を持つカスタム HTML タグを作成することもできます。
ディレクティブ内からイベントを処理して、ボタンやマウスのクリックなどの DOM イベントを処理することもできます。

カスタム ディレクティブとは何ですか?

カスタム ディレクティブを作成するにはどうすればよいですか?

コードの説明

AngularJs ディレクティブとスコープ

コードの説明

関連記事

ディレクティブを含むコントローラーの使用

コードの説明

再利用可能なディレクティブを作成する方法

コードの説明

AngularJS ディレクティブとコンポーネント – ng-transclude

コードの説明

ネストされたディレクティブ

コードの説明

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

コードの説明

製品概要

ニュースレターに登録する

カスタムディレクティブとは何ですか?

カスタムディレクティブを作成するにはどうすればよいですか?