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のディレクティブ機能を利用することで、簡単にカスタムのタグや属性、クラスなどを作ることができ、可読性の高いビュー定義が行えるようになります。
こちらもおススメ