การแนะนำพื้นหลัง
ตัวอย่างนี้เป็นตัวอย่างในวิดีโอมี Superman แบบไดนามิกที่มีความสามารถสามประการความแข็งแรงความแข็งแรงความเร็วความเร็วแสงเรืองแสง
ความสามารถทั้งสามนี้ใช้เป็นสองแอตทริบิวต์และกำหนด Superman แบบไดนามิกเป็นแท็ก คุณสามารถมีความสามารถนี้ได้โดยการเพิ่มแอตทริบิวต์ที่เกี่ยวข้อง
เพื่ออำนวยความสะดวกในการแสดงผลให้เพิ่มเหตุการณ์การตอบสนองของเมาส์ลงในแท็ก เมื่อเมาส์เคลื่อนที่ไปยังแท็กที่สอดคล้องกันวิธีการจะถูกเรียกใช้เพื่อพิมพ์ความสามารถที่มี
การวิเคราะห์โปรแกรม
รหัสสำหรับส่วน HTML มีดังนี้:
<div> <superman> ไม่มีอะไร! </Superman> <Superman Strength> Strength! </Superman> <Superman Strength ความเร็ว> ความเร็วความแข็งแรง!
มาดูวิธีการใช้งาน สิ่งแรกคือการสร้างโมดูล:
var myAppModule = angular.module ("myApp", []);
บนพื้นฐานของโมดูลนี้สร้างแท็ก Superman คล้ายกับอันก่อนหน้า
MyAppModule.Directive ("Superman", function () {return {scope: {}, จำกัด : 'ae', แปล: จริง, เทมเพลต: "<div> <div ng-transclude> </div> </div>, คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) $ SCOPE.ALTION.PUSH ("ความแข็งแกร่ง"); console.log (ขอบเขตความสามารถ);ความแตกต่างที่นี่คือมีแอตทริบิวต์คอนโทรลเลอร์ภายในวิธีการ นี่ไม่ใช่คอนโทรลเลอร์เช่น NG-Controller แต่เป็นอินเทอร์เฟซที่คำแนะนำเปิดไปด้านนอก วิธีการที่ประกาศภายในสามารถใช้เป็นวิธีการสาธารณะภายนอกและคำแนะนำอื่น ๆ สามารถใช้วิธีการเหล่านี้ผ่านการพึ่งพา
ถัดไปสร้างสามคำสั่งที่สอดคล้องกับความสามารถ
MyAppModule.Directive ("Strength", function () {return {ต้องการ: '^Superman', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr, superManCtrl) {superManCtrl.addStrength ();}}}); MyAppModule.Directive ("ความเร็ว", function () {return {ต้องการ: '^Superman', ลิงก์: ฟังก์ชัน (ขอบเขต, องค์ประกอบ, attr, superManCtrl) {superManCtrl.addspeed ();}}}); MyAppModule.Directive ("Light", function () {return {ต้องการ: '^Superman', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr, superManCtrl) {superManCtrl.addLight ();}}});รหัสของคำแนะนำทั้งสามนั้นเกือบจะเหมือนกันซึ่งจำเป็นต้องระบุคำแนะนำที่ขึ้นอยู่กับ
มีพารามิเตอร์เพิ่มเติม superManCtrl ในลิงค์ พารามิเตอร์นี้ถูกเดาว่าเป็นคอนโทรลเลอร์ในซูเปอร์แมนดังนั้นวิธีการตั้งชื่อคือ Superman+Ctrl
[เนื่องจากฉันไม่เข้าใจหลักการภายในนี่เป็นเพียงการคาดเดา แต่การทดลองได้พิสูจน์แล้วว่าหากชื่อของพารามิเตอร์นี้เปลี่ยนไปจะมีการรายงานข้อผิดพลาด -
หลังจากประกาศคำแนะนำทั้งสามนี้คุณสามารถใช้คำแนะนำทั้งสามนี้เป็นแอตทริบิวต์สุดยอด เมื่อมีการระบุแอตทริบิวต์นี้วิธีการภายในภายในลิงก์จะถูกเรียกใช้และวิธีการที่เปิดเผยในซูเปอร์แมนจะถูกเรียก
เพื่อสรุปกระบวนการเชิงโต้ตอบของคำแนะนำ:
1 ก่อนสร้างคำสั่งพื้นฐานและหลังจากแอตทริบิวต์คอนโทรลเลอร์ให้เพิ่มวิธีการเปิดเผยต่อสาธารณะ
2 สร้างคำแนะนำแบบโต้ตอบอื่น ๆ เพิ่มการพึ่งพาคำสั่งที่เกี่ยวข้องหลังจากแอตทริบิวต์ต้องการ โทรหาวิธีการที่เปิดเผยในลิงค์
รหัสโปรแกรมทั้งหมด:
<! 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> <div> <superman> ไม่มีอะไร! > ความแข็งแรงความเร็วแสง! </superman> </div> <script type = "text/javascript"> var myappmodule = angular.module ("myapp", []); MyAppModule.Directive ("Superman", function () {return {scope: {}, จำกัด : 'ae', แปล: จริง, เทมเพลต: "<div> <div ng-transclude> </div> </div>, คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) $ SCOPE.ALTION.PUSH ("ความแข็งแกร่ง"); console.log (ขอบเขตความสามารถ); MyAppModule.Directive ("Strength", function () {return {ต้องการ: '^Superman', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr, superManCtrl) {superManCtrl.addStrength ();}}}); MyAppModule.Directive ("ความเร็ว", function () {return {ต้องการ: '^Superman', ลิงก์: ฟังก์ชัน (ขอบเขต, องค์ประกอบ, attr, superManCtrl) {superManCtrl.addspeed ();}}}); MyAppModule.Directive ("Light", function () {return {ต้องการ: '^Superman', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr, superManCtrl) {superManCtrl.addLight ();}}}); </script> </body> </html>ผลการทำงาน:
ข้างต้นคือข้อมูลเกี่ยวกับการโต้ตอบของคำแนะนำ AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!