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

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

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

directiveメソッドのreplace属性について色々と試してみます。

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

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

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

myApp.directive('myReplace', function(){
	return {
		replace: false,
		template: '<div class="sample">{{msg}}</div>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/replace/0/
■解説
falseがデフォルト値になります。falseの場合は、directiveメソッドを指定した要素の内側にtemplate属性の内容が代入されます。
出力されるソースはそれぞれ下記の通りです。

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

B: replace = true

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

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

myApp.directive('myReplace', function(){
	return {
		replace: true,
		template: '<div class="sample">{{msg}}</div>'
	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/replace/1/
■解説
replace属性にtrueを設定した場合、directiveメソッドを指定した要素自体がtemplate属性の内容に置き換わります。
出力されるソースはそれぞれ下記の通りです。

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