Directive: Template

สิ่งที่ควรรู้

เมื่อเรามีการกำหนด Directive ขึ้นมาแล้วต้องการให้ส่วนนั้นสามารถนำมาใช้ใหม่ (Reuseable) ได้

เราสามารถใช้ template ในการกำหนดองค์ประกอบภายในให้กับ Directive นั้น

angular.directive('someElement', function () {
	return {
		restrict: 'E',
		template: '<div>hello world</div>'
	};
});

เมื่อในไฟล์ html กำหนด <some-element> ลงไป

<some-element></some-element>

สิ่งที่ระบุไว้ใน template จะถูกแสดงอยู่ใน <some-element>

<some-element>
	<div>hello world</div>
</some-element>

กรณีที่ต้องการใช้ตัวแปร สามารถนำตัวแปรมาใช้งานใน directive ได้

angular.controller('someController', function ($scope) {
	$scope.hello = "Hello World";
})
.directive('someElement', function () {
	return {
		restrict: 'E',
		template: '<div>{{hello}}</div>'
	};
});

เมื่อในไฟล์ html กำหนด <some-element> ลงไป

<some-element></some-element>

สิ่งที่ระบุไว้ใน template จะถูกแสดงอยู่ใน <some-element>

<some-element>
	<div>Hello World</div>
</some-element>