ชื่อตั้งค่าการรวมกันของ AngularJs และ bootstrap เพื่อใช้เมนูหีบเพลงซึ่งเป็นรูปแบบของ bootstrap
ในบทความก่อนหน้านี้ฉันได้แนะนำการรวมกันของ Angular.js และ bootstrap เพื่อใช้รหัสการปนเปื้อนของตาราง จากนั้นเรียนรู้การสาธิตที่ดำเนินการ
ส่วนใหญ่ฝึกคำสั่งที่กำหนดเองส่งพารามิเตอร์ลงในคำสั่งและใช้กฎเก่าก่อน:
<my-page ng-repeat = "item in expanders" page-title = "item.title"> {item.text}} </my-page>ข้างต้นเป็นคำสั่งที่กำหนดเองของฉัน เมนูมี 3 ชื่อและเนื้อหาและใช้ NG-repeat เพื่อแสดงผล
คำแนะนำพื้นฐาน API มีดังนี้:
app.directive ('mydirective', function () {return {// retrict: ค่าเริ่มต้นคือ (แอตทริบิวต์, ค่าเริ่มต้น) <div my-directive = ''> </div> e (องค์ประกอบ) c (ชื่อคลาส) m (ความคิดเห็น) // การพิจารณาความเข้ากันได้ของเบราว์เซอร์ ในการบอกว่า AngularJS หยุดการทำงานกับองค์ประกอบปัจจุบันที่ต่ำกว่าคำสั่งลำดับความสำคัญ tattrs) {... } เทมเพลต: '', // โหลดเทมเพลตเทมเพลตจากเทมเพลตที่อยู่ URL ที่ระบุ: '', // ถ้าตั้งค่าพารามิเตอร์นี้ค่าจะต้องเป็น truereplace: false, // ระบุขอบเขตของขอบเขตคำสั่ง: } คอนโทรลเลอร์: '', // คอนโทรลเลอร์: '', // ต้องการ: '', // ดำเนินการ DOM โดยทางโปรแกรมรวมถึงการเพิ่มผู้ฟัง ฯลฯ ลิงก์: ฟังก์ชั่น postlink (ขอบเขต, iElement, iAttrs) {}, // compile: // ส่งคืนฟังก์ชัน คอนโทรลเลอร์) {}, โพสต์: ฟังก์ชั่น (ขอบเขต, iElement, iATTRS, คอนโทรลเลอร์) {}} // หรือฟังก์ชันส่งคืน postlink () {}};};})จะทำให้คนอื่นซ่อนตัวได้อย่างไรเมื่อเปลี่ยน? การใช้งานหลักของคำสั่ง ng-show คือการบันทึกการคลิกปัจจุบันเพื่อซ่อนตัวอื่น
ความคิดเห็นของรหัสเฉพาะมีดังนี้:
<style type = "text/css">. con {margin: 0 auto; width: 600px; margin-top: 100px;}. แผง {width: 580px;}. หัวแผง {เคอร์เซอร์: pointer;} </style> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/> <div ng-app = "myapp" ng-controller = "Myctrl"> <my-page ng-repeat = " page-title = "item.title"> {{item.text}} </my-page> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js" []); app.directive ('myPage', function () {return {จำกัด : 'ea', แทนที่: true, transclude: true, // ไม่ว่าจะถ่ายโอนเนื้อหาองค์ประกอบไปยังขอบเขตเทมเพลต: {title: "= pagetitle"}, template: ['<div>', '<div ng-click = > {{title}} </h3> ',' </div> ',' <div ng-show = "showme" ng-transclude> </div> ',' </div> '] ฟังก์ชั่น toggle () {scope.showme =! scope.showme; HEVERY และอื่น ๆ ที่ได้รับจาก Google JS Library มันเข้ากันได้กับ CSS3 และยังเข้ากันได้กับเบราว์เซอร์ต่างๆ (เช่น 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), JQuery 2.0 และรุ่นต่อ ๆ ไป การโต้ตอบของ Ajax สำหรับเว็บไซต์ 'Bootstrap', BootStrap จาก Twitter เป็นเฟรมเวิร์ก Front-end ที่ได้รับความนิยมอย่างมาก ข้อมูลจำเพาะซึ่งเขียนขึ้นโดยน้อยภาษา CSS แบบไดนามิก '}]; var expanders = []; false;}})}}); </script>