Directive: ชนิดของ Directive (Restrict)

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

ใน AngularJS Framework เราสามารถสร้าง Directive ขึ้นมาเองได้

โดยชนิดของ Directive (restrict) มี 2 ชนิด

• Element Directive
• Attribute Directive

ในการกำหนดชื่อ Directive จะกำหนดด้วยหลักการของ camelCase

ส่วนในการเรียกใช้ใน HTML จะต้องเรียกใช้ด้วยหลักของ dash

Element Directive

การกำหนด Directive แบบ Element จะมีลักษณะเป็น tag ของ HTML

เช่นเราสร้าง Directive ชนิด element ชื่อ someElement

angular.directive('someElement', function() {
	return {
		restrict: 'E'
	};
});

เมื่อเรียกใช้ใน html เราจะกำหนด <some-element> โดยใช้หลัก dash ของ html

<some-element></some-element>

Attribute Directive

การกำหนด Directive แบบ Attribute จะมีลักษณะเป็น Attribute ใน tag ของ HTML

เช่นเราสร้าง Directive ชนิด Attribute ชื่อ someAttr

angular.directive('someAttr', function() {
	return {
		restrict: 'A'
	};
});

เมื่อเรียกใช้ใน html จะเพิ่ม Attribute ไปใน tag ที่เราต้องการ

<div some-attr></div>
<div some-attr=""></div>

ข้อดี - ข้อเสียของ Element Directive

ข้อดี

• ง่ายต่อการจัดการส่วนต่างๆในหน้าเว็บ เข้าใจได้ง่าย

ข้อเสีย

• ไม่สามารถใช้ใน IE เวอร์ชั่นเก่าได้ เนื่องจาก IE จะไม่เห็นว่ามันเป็น tag

ข้อดี - ข้อเสียของ Attribute Directive

ข้อดี

• สามารถใช้งานได้กับทุก browser

ข้อเสีย

• ในกรณีที่มี attribute มากๆ อาจจะทำให้โค้ดอ่านยาก