[AngularJS]ディレクティブに指定するrestrictの指定例[E,A,C,M]

カテゴリ: AngularJS

Angularでは、ディレクディブ(カスタムのタグや、属性のようなもの)を作る時、restrictと言うものを指定します。
ここでは、restrictの種類と、それぞれの実行サンプルを説明します。

確認した環境

AngularJS 1.2.32
Google chrome

restrictの種類

rectrictには4つの種類があり、それぞれ下記の意味です。

E: カスタムのエンティティ(タグ)
A: カスタムの属性(<img src=...>のsrcに当たるもの)
C: カスタムのクラス(img class="xxx")のxxxに当たるもの)
M: コメント

それぞれがどのように働くかは、コードで確認した方が早いので、サンプルコードを示します。

サンプルコード

html

順番が前後しますが、まずはhtmlの中身をです。bodyの中にmy-directiveから始まる記述があることに注目してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body ng-app="appModule">

    <h2>Attribute</h2>
    <p my-directive-a></p>


    <h2>Class</h2>
    <p class="my-directive-c"></p>


    <h2>Comment</h2>
    <!-- directive: my-directive-m --> 


    <h2>EntityとAttribute</h2>
    <my-directive-ea></my-directive-ea>
    <p my-directive-ea></p>

</body>
</html>

AngularJSのJavaScriptコード

こちらがAngularJSのディレクブ定義があるJSのコードです。ディレクティブ名と、restrictが異なるだけで、中身はほぼ同じです。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script>
<script>

// 要素(entity)のディレクティブ
var appModule = angular.module("appModule", []);
appModule.directive('myDirectiveE', function() {
    return {
        restrict: 'E',
        template: "helloE",
    };
});

// 属性のディレクティブ
appModule.directive('myDirectiveA', function() {
    return {
        restrict: 'A',
        template: "helloA",
    };
});

// クラスのディレクティブ
appModule.directive('myDirectiveC', function() {
    return {
        restrict: 'C',
        template: "helloC",
    };
});

// コメントのディレクティブ
appModule.directive('myDirectiveM', function() {
    return {
        restrict: 'M',
        link: function() {
            console.log("hello M");
        }
    };
});

// クラスのディレクティブ
appModule.directive('myDirectiveEa', function() {
    return {
        restrict: 'EA',
        template: "helloEa",
    };
    });
</script>

実行結果

上記のコードを実行すると、ブラウザでは以下のように出力されます。
myDirectiveEaの定義では、rectrictを"EA"と指定しているため、タグ/属性のどちらでも指定が可能になっています。

コメントのディレクティブでは、JavaScriptのコードを実行していますが、その結果はconsoleに出力されます。

Angularのコードが走った後のHtmlのDOMツリーは以下のようになります。

このようにAngularJSのディレクティブ機能を利用することで、簡単にカスタムのタグや属性、クラスなどを作ることができ、可読性の高いビュー定義が行えるようになります。

こちらもおススメ

コメントを残す

メールアドレスが公開されることはありません。