Lesson 10: Custom Directive

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

Directive ทั้งหมดที่เรารู้จักไปนั้นเป็นที่ AngularJS กำหนดขึ้น

แต่เราก็สามารถกำหนด Directive ของเราขึ้นมาเองได้เหมือนกัน เรียกว่า Custom Directive

ชนิดของ Custom Directive

Custom Directive มีทั้งหมด 2 แบบ คือ

• Element Directive
• Attribute Directive

มาสร้าง Custom Directive กัน

โดย Custom Directive มีโครงสร้างดังนี้

app.directive('someDirective', function(){
	return {
		restrict: 'E', // ชนิดของ Directive 'E'lement or 'A'ttribute
		templateUrl: 'someFile.html', // เป็นส่วนที่กำหนด template ภายในของ directive ตัวนั้น
		controller: function () {}, // ในกรณีที่จำเป็นต้องใช้การคิด Logic หรือมีฟังก์ชั่นการทำงาน
		link: function () {} //ส่วนที่ทำการ binding event ให้กับองค์ประกอบใน directive
		
	};
});

โดยการกำหนดชื่อของ directive ใน javascript จะใช้แบบ camelCase

app.directive('taskManager', function () {...});

และการใช้งาน directive ใน html จะใช้แบบ dash

หมายเหตุ: การกำหนด Custom Directive แบบ Element อาจจะมีปัญหาเกิดขึ้นในการใช้งานกับ IE (Internet Explorer)

ผมจะไม่กล่าวถึง Custom Directive มากนัก เนื่องจากเนื้อหาเชิงลึกค่อนข้างมาก