吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

directiveメソッド、restrict属性の使い方

2013年12月9日 / category : angularjs, directive, lab

directiveメソッドのrestrict属性の使い方を紹介します。
前回の記事で、下記の指定方法があると紹介しました。

A: attribute指定(属性指定):デフォルト
例)<div my-directive=”exp”>
E: element指定(要素指定)
例)<my-directive>
C: class指定(クラス指定)
例)<div class=”my-directive: exp;”>
M: comment指定(コメント指定)
例)<!– directive: my-directive exp –>

この指定方法をそれぞれ紹介します。
下記のサンプルがそれぞれの指定を実際に記述したものとなります。

http://tsudoi.org/javascript/angularjs/Reference/Blog/11/restrict/

こちらを基に解説していきます。

A: attribute指定(属性指定):デフォルト

■HTML – index.html
<div ng-controller="CtrlAttribute">
<dl>
<dt>restrict - attribute指定</dt>
<dd><span my-attribute></span></dd>
</dl>
</div>
■JavaScript – app.js
myApp.controller('CtrlAttribute', ['$scope', function($scope){
	$scope.prop = {
		msg: 'Hello world ! - attribute指定'
	};
}]);

myApp.directive('myAttribute', function(){
	return {
		restrict: 'A',
		template: '<p>{{prop.msg}}</p>'
	};
});

属性が「-」を使用している場合、directiveメソッド側では、「-」の次の文字列を大文字にして「-」をトルツメします。

E: element指定(要素指定)

■HTML – index.html
<div ng-controller="CtrlElement">
<dl>
<dt>restrict - element指定</dt>
<dd><my-element></my-element></dd>
</dl>
</div>
■JavaScript – app.js
myApp.controller('CtrlElement', ['$scope', function($scope){
	$scope.prop = {
		msg: 'Hello world ! - element指定'
	};
}]);

myApp.directive('myElement', function(){
	return {
		restrict: 'E',
		template: '<p>{{prop.msg}}</p>'
	};
});

C: class指定(クラス指定)

■HTML – index.html
<div ng-controller="CtrlClass">
<dl>
<dt>restrict - class指定</dt>
<dd><span class="my-class"></span></dd>
</dl>
</div>
■JavaScript – app.js
myApp.controller('CtrlClass', ['$scope', function($scope){
	$scope.prop = {
		msg: 'Hello world ! - class指定'
	};
}]);

myApp.directive('myClass', function(){
	return {
		restrict: 'C',
		template: '<p>{{prop.msg}}</p>'
	};
});

M: comment指定(コメント指定)

■HTML – index.html
<div ng-controller="CtrlComment">
<dl>
<dt>restrict - comment指定</dt>
<dd><!-- directive: my-alert --></dd>
</dl>
</div>
■JavaScript – app.js
myApp.controller('CtrlComment', ['$scope', function($scope){

}]);

myApp.directive('myAlert', function(){
	return {
		restrict: 'M',
		link: function(){
			alert('Hello world ! - comment指定');
		}
	};
});

また、restrictを複数指定することも可能です。
その場合は、値を連続して記述します。

restrictの複数指定

■HTML – index.html
<div ng-controller="CtrlConnection">
<dl>
<dt>restrict - 複数指定</dt>
<dd>element指定 : <my-connection></my-connection></dd>
<dd>attribute指定 : <span my-connection></span></dd>
<dd>class指定 : <span class="my-connection"></span></dd>
</dl>
</div>
■JavaScript – app.js
myApp.controller('CtrlConnection', ['$scope', function($scope){
	$scope.prop = {
		msg: 'Hello world !'
	};
}]);

myApp.directive('myConnection', function(){
	return {
		restrict: 'AEC',
		template: '{{prop.msg}}'
	};
});