ประโยชน์ของ Custom Directive
- สามารถกำหนดให้นำ tag หรือ attribute จากไฟล์อื่นมาวางไว้ในตำแหน่งที่ต้องการได้
- สามารถสร้าง Controller ภายใน Directive ได้.
- สะดวกในการนำไปใช้ซ้ำ
ไฟล์ bookstore.html
<!DOCTYPE html><html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<book-type></book-type>
</body>
</html>
อธิบาย :
- <book-type> คือ element ที่สร้างจาก Custom Directive ในไฟล์ app.js
Directive ชื่อ bookTitle ชื่อ Tag ต้องเป็น <book-title> เป็นต้น
ไฟล์ app.js
(function(){
var app = angular.module('myapp',[]);
app.directive('bookType',function(){
return{
restrict:'E',
templateUrl:'booktype.html'
};
});
app.controller('BookType',function(){
this.booktype = ['accounting','it','engineering'];
});
})();
อธิบาย :
- สร้าง module ชื่อ myapp
- สร้าง directive ชื่อ bookType
- directive ที่สร้างกำหนดเป็น Element (สามารถกำหนดเป็น Attribute ได้ด้วย เช่น restrict:'A')
- เรียกใช้ template จากไฟล์ booktype.html
- สร้าง controller ชื่อ BookType
- ประกาศตัวแปร booktype ใน Controller มีชนิดข้อมูลเป็น Array
ไฟล์ booktype.html
<select ng-controller="BookType as Type">
<option ng-repeat="book in Type.booktype" value="{{book}}">
{{book}}
</option>
</select>
อธิบาย :
- เรียกใช้ controller Booktype ผ่าน ng-controller
- ดึงข้อมูลจากตัวแปร Array ด้วย ng-repeat
จากตัวอย่างที่ผ่านมามีการสร้าง Controller แยกต่างหาก ตัวอย่างต่อไปจะเป็นการสร้าง Controller พร้อมกับการสร้าง Directive เพื่อเขียนโค้ดให้สั้นลง แก้ไขไฟล์ ดังนี้
ไฟล์ app.js
(function(){
var app = angular.module('myapp',[]);
app.directive('bookType',function(){
return{
restrict:'E',
templateUrl:'booktype.html',
controller:function(){
this.booktype = ['accounting','it','engineering'];
},
controllerAs:'Type'
};
});
})();
อธิบาย :
- กำหนด controller ให้ Directive โดยมีตัวแปร booktype เก็บข้อมูลแบบ Array
- กำหนด Alias name ให้ controller ชื่อ Type (นำไปใช้ในการอ้างอิงกับไฟล์ Template)
ไฟล์ booktype.html
<select>
<option ng-repeat="book in Type.booktype" value="{{book}}">
{{book}}
</option>
</select>
อธิบาย :
- นำส่วนที่เรียกใช้ Controller (ng-controller) ออก เนื่องจาก template มีการสร้าง controller ใน Directive อยู่แล้ว
- เรียกใช้ตัวแปรภายใน Controller ผ่าน Alias name ที่ชื่อ Type
ไม่มีความคิดเห็น:
แสดงความคิดเห็น