AngularJS でカスタムディレクティブを制限する

Muhammad Adil 2022年5月23日

Angular Angular Directive

ディレクティブは、HTML 要素の機能を拡張したり、純粋な HTML では利用できない豊富な動作を備えた新しい機能を作成したりするために使用される特殊なタイプの AngularJS コンポーネントです。

AngularJS には、ngBind、ngModel、ngClass などのビルド済みディレクティブが含まれています。Angular フレームワークは、これらのディレクティブを使用して、新しい HTML タグについてブラウザーに指示します。

HTML タグとコメント、CSS クラスとプロパティは、ディレクティブの例です。

制限ディレクティブは、属性を追加することにより、外部 HTML コードからの DOM 要素へのアクセスを制限します。

この記事では、AngularJS でカスタムディレクティブを制限する方法について説明します。

AngularJS ディレクティブ制限 `A` と `E`

restrict 属性は、1 文字の長さの新しいディレクティブを作成する方法を Angular に指示します。A、C、E、M、または EA、ME などのこれらの値の組み合わせの 4つの値を持つことができます。

それぞれがその方法で重要です。

制限値とその意味を以下に示します。

E は、要素としてのみ使用できることを示します。
A は、属性としてのみ使用できることを示します。
C はクラス属性としてのみ有効です。
M はコメントにのみ適用されます。

ディレクティブの名前が hello であるとします。タイプとその使用法は次のとおりです。

A = <div hello></div>
C = <div class="hello"></div>
E = <hello data="Demo"></hello>
M = <!--directive:hello -->

テンプレートを担当するコンポーネントを開発するときは、要素を使用します。これは、テンプレートの側面にドメイン固有言語を構築する場合の一般的なシナリオです。

既存の要素に新しい機能を追加するときは、属性を使用します。

要素ではなく属性を利用する場合は、同じ DOM ノードに複数のディレクティブを適用できます。

これは、多くのタグのコンポーネントを囲むことなく、追加のプロパティを使用してラベルを強調表示、無効化、または追加できるフォームコントロールで特に役立ちます。

例（JavaScript）：

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});
app.directive('helloWorld',function(){
    return {
        replace:true,
        restrict: 'E',
        template: '<h2>Hello World</h2>'
    }
});

例（HTML）：

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8" />
        <script>document.write('<base href="' + document.location + '" />');</script>
        <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <hello-world></hello-world>
        <div hello-world></div>
        <div class="hello-world"></div>
    </body>
</html>

ここをクリックして、コードのライブデモンストレーションを確認してください。

著者： Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

AngularJS ディレクティブ制限 A と E

関連記事 - Angular Directive

AngularJS ディレクティブ制限 `A` と `E`