มาดูการเรนเดอร์ก่อน
ก่อนอื่นมาพูดคุยเกี่ยวกับการทำรังคำแนะนำ ตามชื่อที่แนะนำการทำรังการเรียนการสอนหมายถึงคำแนะนำมากกว่าสองคำแนะนำที่ซ้อนกันกันเช่นต่อไปนี้:
<a-deirective> <b-directive> </b-directive> <c-directive> </c-directive> </a-directive>
คำสั่งฟังก์ชั่นแท็บต่อไปนี้เพิ่งใช้ซึ่งสามารถทำให้รหัสกระชับมากขึ้น
<! doctype html> <html lang = "en" ng-app = "docStabsexample"> <head> <meta charset = "utf-8"> <title> </title> <script> </script> src = "lib/angular-route.js" type = "text/javascript"> </script> <script src = "lib/jQuery-2.1.4.min.js"> </script> <script src = "lib/bootstrap.js" type = "text/javascript" href = "css/bootstrap.css" type = "text/css"/> <style> .active {พื้นหลัง: สีแดง; } </style> </head> <body ng-controller = "appcon"> <my-tabs> <!-คำสั่งด้านนอก-> <my-pane title = "One"> <!-คำสั่งภายใน-> <h4> หนึ่ง </h4> <p> angularangularangular </p> </my-pane> <my-pane = " <p> angularangularangularangularangularangular </p> </my-pane> <my-pane title = "มี"> <!-คำแนะนำภายใน-> <h4> มี </h4> <p> bootstrapbootstrapbootstrapbootstrapbootstrap </p> </my-pane> < <p> jQueryJQueryJQueryJQueryJQueryJQueryJQUERYJQUERYJQUERYJQUERYJQUEYJQUEYJQUERYJQUERYJQUERYJQUERYJQUERYJQQUERYJQQUERYJQQUERYJQQUERYYJQUERYERY eryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjquery </my-tabs> </body> <script> var app = angular.module ("docStabsexample", ['template']). controller ("appcon", ["$ scope", ฟังก์ชั่น ($ scope) {}]). directive ("mytabs" TemplateUrl: "mytabs.html", คอนโทรลเลอร์: ["$ scope", ฟังก์ชั่น ($ scope) {// ใช้คอนโทรลเลอร์เพื่อให้คำสั่งด้านในสุดสามารถสืบทอดคำสั่งด้านนอกเพื่อให้เลเยอร์ด้านในสามารถผ่านข้อมูลระหว่างการเรียนการสอนภายนอกได้ Angular.foreach (PANES, FUNCTION (ขอบเขต) {// ถ่ายโอนคำสั่งหน่วยความจำทั้งหมดและซ่อนเนื้อหาอย่างสม่ำเสมอขอบเขตการเลือก = FALSE;}); if (panes.length === 0) {$ scope.select (ขอบเขต);} panes.push (ขอบเขต); // ผ่านอาร์เรย์คำสั่งด้านในลงในอาร์เรย์คำสั่งด้านนอก ต้องการ: '^mytabs', // สืบทอดเทมเพลตคำสั่งด้านนอก: "mypane.html", ลิงก์: ฟังก์ชั่น (ขอบเขต, elemenet, attrs, mytabscontroller) {mytabscontroller.addscope (ขอบเขต); Angular.module ("Template", []) .run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("mytabs.html", "<div class = 'ตาราง'>" + " ng-class = '{active: pane.selected}'> " +" <a href = '#' ng-click = 'select (pane)'> {{pane.tittle}} <a/> " +" </li> " +" .run (["$ templatecache", ฟังก์ชั่น ($ templatecache) {$ templatecache.put ("mypane.html", "<div class = 'table-pane' ng-show = 'selected' ng-transclude>" + "</div>") หลักการการนำไปปฏิบัติของคำสั่งทั้งหมดคือการเปิดเผย scope ของคำสั่งด้านในไปยังคำสั่งด้านนอกผ่านการสืบทอดของคำสั่งเพื่อให้การแสดงคำสั่งภายในสามารถควบคุมได้ในการเรียนการสอนด้านนอก มีอีกสิ่งหนึ่งที่จะอธิบายที่นี่ เพื่อให้คำแนะนำมีลำดับชั้นและตรรกะมากขึ้น ng-transclude ใช้เพื่ออนุญาตให้เนื้อหา template ของคำแนะนำกลับเข้าสู่เนื้อหาที่ทำเครื่องหมายไว้ ng-transclude
บทสรุป
ตกลงข้างต้นเป็นเรื่องเกี่ยวกับ AngularJS ที่ใช้ฟังก์ชั่นการสลับแท็บผ่านคำแนะนำ คุณได้เรียนรู้แล้วหรือยัง? ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ AngularJs หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร ขอบคุณสำหรับการสนับสนุน Wulin.com