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

directiveメソッド、template属性とtemplateUrl属性

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

directiveメソッドのtemplate属性とtemplateUrl属性の使い方の紹介です。
template属性とtemplateUrl属性ともに、returnによって出力される内容を指定します。

template属性 → 文字列または、htmlコード
templateUrl属性 → 外部htmlを読み込む

といった使い方です。

それでは、これらの属性を使って少しギミックを加えたサンプルを紹介します。

まずは、サンプルを見てください。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/template/
■サンプルファイル一式
ダウンロード – zip

ボタン「赤」をクリックすると、赤いボックスに変更されます。同様に、ボタン「緑」は、緑のボックス、ボタン「青」は、青のボックスに変更されます。
両方とも同じ動作ですが、仕組みを「template属性」と「templateUrl属性」で違います。

■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/angular.min.js"></script>
<script src="js/app.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div ng-controller="Main">

<div id="btns">
<button ng-click="changeColor('red')">赤</button>
<button ng-click="changeColor('green')">緑</button>
<button ng-click="changeColor('blue')">青</button>
</div>

<div class="wrap">
<p>template</p>
<box></box>
</div>

<div class="wrap">
<p>templateUrl - temp.html</p>
<temp></temp>
</div>

</div>

</body>
</html>
■HTML – temp.html
<div class="{{value}}"></div>
■CSS – styles.css
.red{
	background:#f00;
}

.green{
	background:#0f0;
}

.blue{
	background:#00f;
}
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Main', ['$scope', function($scope){

	$scope.value = 'red';
	$scope.changeColor = function(_value){
		$scope.value = _value;
	}

}]);

myApp.directive('box', function(){
	return {
		restrict: 'E',
		template: '<div class="{{value}}"></div>'
	};
});

myApp.directive('temp', function(){
	return {
		restrict: 'E',
		templateUrl: 'temp.html'
	};
});
■解説
<box></box>には、<div class=”{{value}}”></div>が代入され、
<temp></temp>には、temp.htmlが読み込まれます。
また、各ボタンのクリックにより、{{value}}に、「red」「green」「blue」が代入され、対応するcssが適応されます。