ประเด็นสำคัญสำหรับการเรียนรู้
•ทำไมต้องใช้คำสั่ง
•สร้างคำสั่งที่กำหนดเอง
•ทำงานกับ jqlite
1. ทำไมต้องใช้คำสั่งที่กำหนดเอง
NG มีคำสั่งที่กำหนดเองมากมายในตัว แต่บางครั้งพวกเขาไม่ตรงตามความต้องการของคุณซึ่งต้องการให้เราสร้างคุณสมบัติที่กำหนดเอง
2. คำสั่งที่กำหนดเอง
ถัดไปมาทำเคสเล็ก ๆ กัน เมื่อเมาส์คลิกเพื่อเพิ่มราคารายการจะเพิ่มขึ้นโดยอัตโนมัติ แน่นอนว่ารายการจะถูกเพิ่มโดยอัตโนมัติผ่านคำแนะนำ มันเป็น div ที่ว่างเปล่า
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> การทดสอบ Angluar </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = "css/bootstrap. type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv ng-controller = "defaultctrl"> <div> <h3> ผลิตภัณฑ์ </h3> เพิ่ม </button> </div> <div> <!-แสดงข้อมูลผลิตภัณฑ์ในรายการที่ไม่ได้เรียงลำดับ-> <!-list-property = "ราคา | สกุลเงิน" รายการรายการที่แปลเป็นภาษาท้องถิ่น-> <div unorderList = "ผลิตภัณฑ์" list-property = "currency | src = "js/angular.min.js"> </script> <script type = "text/javascript"> angular.module ("ExampleApp", []). directive ("unorderlist", ฟังก์ชัน () {// ขอบเขตขององค์ประกอบ Attrs ['UnorderList'] รับค่าของแอตทริบิวต์ UnorderList นี่คือผลิตภัณฑ์ // รับค่าของแบบจำลองข้อมูลนี่คือขอบเขตการผลิตข้อมูล var = ขอบเขต [attrs ['unorderList']]; Element.Append (UL); สร้างองค์ประกอบแท็ก <li> var li = angular.element ("<li>"); ขอบเขต. $ watch (watcherfn, ฟังก์ชั่น (newValue, oldValue) {// อัปเดตค่าของ li li.text (newValue);})}) (i);}}}}}}}}) "ผลไม้", ราคา: 1.20, หมดอายุ: 10}, {ชื่อ: "กล้วย", หมวดหมู่: "ผลไม้", ราคา: 2.42, หมดอายุ: 7}, {ชื่อ: "ลูกแพร์", หมวดหมู่: "ผลไม้", ราคา: $ scope.products.length;การวิเคราะห์:
ขั้นตอนที่ 1: สร้างคอนโทรลเลอร์เพิ่มผลิตภัณฑ์โมเดลข้อมูลและวิธีการเพิ่มราคา ()
ขั้นตอนที่ 2: ปรับแต่งแท็ก unorderlist ฟังก์ชั่นของแท็กนี้คือ: แสดงค่าในรายการที่ไม่ได้เรียงลำดับผ่านโมเดลข้อมูลที่กำหนดขอบเขต
ส่วนที่ 3: และเมื่อคลิกปุ่มมาร์กอัปค่าของรายการที่ไม่ได้เรียงลำดับจะเพิ่มขึ้นตามลำดับ
3. ทำงานกับ jqlite
ng มี jqlite ในตัวซึ่งเป็น jQuery รุ่นเล็กกว่า
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> การทดสอบ Angluar </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = "css/bootstrap. type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv> <!-ใช้คำสั่งที่กำหนดเอง-> <ol-directive> <li> แอปเปิ้ล </li> <li> Pears </li> <li> ส้ม </li> </ol> </dlv> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javascript องค์ประกอบ, attrs) {// ค้นหา LIS ทั้งหมดภายใต้องค์ประกอบองค์ประกอบที่นี่องค์ประกอบคือผู้โทร <ol> var items = element.find ("li"); {if (items.eq (i). text () == "oranges") {items.eq (i) .css ("สี", "สีแดง"); items.css ("color"));การวิเคราะห์:
ขั้นตอนที่ 1: ปรับแต่งคอนโทรลเลอร์และกำหนดชื่อโมเดลข้อมูล
ขั้นตอนที่ 2: ปรับแต่งคำสั่งฟังก์ชั่นคือการค้นหา LIs ทั้งหมดภายใต้องค์ประกอบที่ใช้โดยคำสั่งและกำหนดค่าที่แตกต่างให้กับสีที่แตกต่างกันของตัวอักษร
ขั้นตอนที่ 3: โทรและใช้คำแนะนำในมุมมอง
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น