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

directiveメソッド、transclude属性について(基本)

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

directiveメソッドのtransclude属性について色々と試してみます。
transclude属性は、ngTranscludeとセットで使用されます。

ngTransclude

A: transclude = false(デフォルト)

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div my-transclude>{{msg}}</div>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.msg = 'あいうえお';
}]);

myApp.directive('myTransclude', function(){
	return {
		transclude: false,
		template: '<p ng-transclude>かきくけこ</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/transclude/0/
■解説
falseがデフォルト値になります。falseの場合は、html側にng-transclude属性があっても、特に変化はありません。
index.htmlの{{msg}}が無視されるカタチになり、指定したmy-transclude属性の内側に、directiveメソッドのtemplate属性の内容が代入されます。
出力されるソースはそれぞれ下記の通りです。

<div class="wrap ng-scope" ng-controller="Ctrl">
<div my-transclude="">
<p ng-transclude="">かきくけこ</p>
</div>
</div>

B: transclude = true

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<div my-transclude>{{msg}}</div>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.msg = 'あいうえお';
}]);

myApp.directive('myTransclude', function(){
	return {
		transclude: true,
		template: '<p ng-transclude>かきくけこ</p>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/transclude/1/
■解説
transcludeにtrueを設定した場合、directiveメソッドのtemplate属性で指定したng-transclude属性の内側に{{msg}}が代入されるカタチになりました。
出力されるソースはそれぞれ下記の通りです。

<div class="wrap ng-scope" ng-controller="Ctrl">
<div my-transclude="">
<p ng-transclude="">
<span class="ng-scope ng-binding">あいうえお</span>
</p>
</div>
</div>

C: transclude = ‘element’

現在、使途不明・・・