AngularJS รองรับคุณสมบัติแท็กที่ผู้ใช้กำหนดและเพิ่มเนื้อหาที่กำหนดเองโดยไม่ต้องใช้การทำงานของ DOM Node
คุณสมบัติหลักสี่ประการของ AngularJs ถูกกล่าวถึงก่อนหน้านี้:
1 MVC
2 โมดูลาร์
3 คำแนะนำ
4 การเชื่อมโยงข้อมูลสองทาง
จะมีการแนะนำต่อไปนี้:
1 วิธีปรับแต่งคำสั่ง
2 ใช้คำแนะนำที่กำหนดเอง
3 การใช้คำสั่งแบบอินไลน์
วิธีปรับแต่งคำสั่ง:
Angular เป็นเฟรมเวิร์กที่ใช้โมดูลดังนั้นคุณต้องสร้างโมดูลของคุณเอง:
var myAppModule = angular.module ("myApp", []);
จากนั้นสร้างคำสั่งบนโมดูลนี้
MyAppModule.Directive ("Xingoo", function () {return {จำกัด : 'aECM', เทมเพลต: '<div> สวัสดีคำสั่งของฉัน </div>', การแทนที่: true}});ในหมู่พวกเขา Xingoo เป็นชื่อของแท็กที่กำหนดเองของเราตามด้วยฟังก์ชันวิธีการ
ฟังก์ชั่นส่งคืนการผสมผสานคู่คีย์-ค่าซึ่งกำหนดวิธีการใช้งานคุณสมบัติ ฯลฯ ของแท็ก
มาดูกันว่ามันกำหนดอะไร:
1 จำกัด : กำหนดวิธีการใช้งานของแท็กโดยมีทั้งหมดสี่ประเภทคือ AECM
2 เทมเพลต: กำหนดเทมเพลตสำหรับแท็ก ด้านในเป็นสตริงที่ใช้แทนที่แท็กที่กำหนดเอง
3 การเปลี่ยน: ไม่ว่าจะสนับสนุนการเปลี่ยน
4 transclude: จะสนับสนุนการฝังตัว
วิธีใช้คำสั่ง:
สี่วิธีที่กล่าวถึงข้างต้นใช้ป้ายกำกับคือ AECM
แอตทริบิวต์: ใช้เป็นแอตทริบิวต์
<Div Xingoo> </div>
องค์ประกอบ e: ใช้เป็นองค์ประกอบฉลาก
<Xingoo> </xingoo>
คลาส C: ใช้เป็นสไตล์ CSS
<div> </div>
M ความคิดเห็นความคิดเห็น: ใช้เป็นความคิดเห็น (วิธีนี้ไม่สามารถใช้ได้ในเวอร์ชัน 1.2!)
<!-Directive: Xingoo->
<div> </div>
โดยทั่วไปแล้วขอแนะนำให้ใช้เป็นคุณลักษณะและองค์ประกอบ
เมื่อคุณต้องการขยายแอตทริบิวต์บนแท็ก HTML ที่มีอยู่ให้ใช้วิธีแอตทริบิวต์
เมื่อคุณต้องการปรับแต่งแท็กให้ใช้รูปแบบของแท็ก
ในการใช้วิธีการนั้นคุณต้องประกาศจดหมายที่เกี่ยวข้องในข้อ จำกัด ในคำสั่งนิยาม
การใช้คำสั่งแบบอินไลน์:
เนื่องจากแท็กอื่น ๆ สามารถซ้อนกันภายในแท็กหากคุณต้องการทำรังแท็กองค์ประกอบอื่น ๆ ในแท็กที่กำหนดเองคุณต้อง:
1 ใช้คุณสมบัติ transclude ตั้งค่าเป็นจริง
2 และใช้คุณสมบัติ NG-Transclude เพื่อกำหนดตำแหน่งซ้อนภายในภายใน
รหัสมีดังนี้:
MyAppModule.Directive ("ทดสอบ", function () {return {จำกัด : 'AECM', แปล: จริง, เทมเพลต: "<div> ฮ่าฮ่า!รหัสทั้งหมด
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <สคริปต์ src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <xingoo> <xingoo> 3333 </xingoo> <hr> <stest> 4444 </stest> <script type = "text/javascript"> var myappmodule = angular.module ("myapp", []); MyAppModule.Directive ("Xingoo", function () {return {จำกัด : 'aECM', เทมเพลต: '<div> สวัสดีคำสั่งของฉัน </div>', การแทนที่: true}}); MyAppModule.Directive ("ทดสอบ", function () {return {จำกัด : 'AECM', transclude: true, template: "<div> haha! <div ng-transclude> </div> wuwu! </script> </body> </html>การรันผลลัพธ์
ข้างต้นคือข้อมูลที่แยกแยะคำสั่งที่กำหนดเอง AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!