คำนำ
ตอนแรกฉันวางแผนที่จะเขียนมันใน AngularJs พื้นเมือง แต่ฉันพบว่าการใช้ AngularJs พื้นเมืองฉันไม่สามารถรับความกว้างและความสูงของภาพในนั้นได้เพราะวิธี jQuery ในตัวของ AngularJS ไม่มีวิธีการ winth() height()
มันจะดีกว่าถ้าฉันแนะนำ jQuery และผูกพันความกว้างและความสูงใน scope เดียวกัน ไปที่ซอร์สโค้ดด้านล่างและโดยวิธีการที่ฉันจะพูดถึงบางจุดในนั้น
แผนผังการสืบพันธุ์
ก่อนอื่นมาอธิบายกันเถอะ
1. ก่อนอื่นมีการใช้คำแนะนำพร้อมกันสองข้อและการสื่อสารจะดำเนินการระหว่างสองคำแนะนำพร้อมกัน การสื่อสารระหว่างคำแนะนำพร้อมกันนั้นง่ายมากนั่นคือไม่อนุญาตให้มีคำแนะนำพร้อมกันเพื่อสร้าง scope อิสระและทำให้เสร็จสมบูรณ์ภายใต้ขอบเขตเดียวกัน หาก scope คำสั่งไม่มีการประกาศพิเศษแสดงว่าเป็น scope หลัก เทมเพลตที่สร้างขึ้นโดยคำสั่งไม่มีความหมายพิเศษเว้นแต่จะถูกรวบรวมภายใต้ scope ที่เฉพาะเจาะจง โดยค่าเริ่มต้นคำสั่งไม่ได้สร้าง scope เด็กใหม่ แต่ใช้ scope หลัก นั่นคือถ้าคำสั่งมีอยู่ภายใต้ controller มันจะใช้ scope ภายใต้ controller
2. จากนั้นใช้ $q เพื่อชะลอการได้มาซึ่งข้อมูลแบบอะซิงโครนัส คุณยังสามารถเห็นการใช้งาน $q
ตัวอย่างซอร์สโค้ด
<! doctype html> <html lang = "en" ng-app = "magnifierapp"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "ข้อความ/javascript" type = "text/javascript"> </script> <script src = "lib/angular-animate.js" type = "text/javascript"> </script> <script src = "lib/jQuery-2.1.4.min.js" type = "text/javascript" มาร์จิ้น: 0px; } .content {Width: 800px; ความสูง: 400px; ตำแหน่ง: ญาติ; ชายแดน: 1px ของแข็งสีแดง; } .left {width: 310px; ความสูง: 380px; } .top {width: 310px; ความสูง: 310px; เส้นขอบ: 1px Solid Blue; เคอร์เซอร์: ตัวชี้; } .top img {width: 310px; ความสูง: 310px; } .Bottom {ตำแหน่ง: ญาติ; ความกว้าง: 310px; ความสูง: 60px; ชายแดน: 1px Solid Black; } .bottom img {display: inline-block; ความกว้าง: 60px; ความสูง: 60px; ลอย: ซ้าย; มาร์จิ้น: 0 30px; เคอร์เซอร์: ตัวชี้; }. right {border: 1px solid; ความกว้าง: 300px; ความสูง: 300px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 400px; ด้านบน: 20px; ล้น: ซ่อน; }. img img {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 700px; ความสูง: 600px; }. show {display: block; } .hided {display: none; } </style> <body> <div ng-controller = "MagnifierController"> <div> <div ng-init = "isactive = 0"> <div> {{x}}+{{y}} </div> ng-mouseover = "isactive = 0"/> <img src = "img/yellow_1.jpg" ng-mouseover = "isactive = 1"/> </div> </div> <div magnifier-right> <div> {{x}}+{{y}} id = "Magnifier-top.html"> <div ng-mousemove = "getPosition ($ event.offsetx, $ event.offsety)" ng-mouseover = "isshow = true" ng-mouseleave = "isshow = false"> ng-class = "{true: 'show', false: 'hidden'} [isactive == 0]"/> <img src = "img/yellow_2.jpg" ng-class = "{true: 'show', false: 'hidden'} [isactive == 0] ng-class = "{true: 'show', false: 'hidden'} [isactive == 1]"/> </div> </script> <script type = "text/ng-template" id = "magnifier-right.html"> <div> ng-class = "{true: 'show', false: 'hidden'} [isactive == 0]" id = "img1"/> <img src = "{{img2.src}}" ng-class = "true: 'แสดง' src = "{{img2.src}}" ng-class = "{true: 'show', false: 'hidden'} [isactive == 1]"/> </div> </script> App.Controller ('MagnifierController', ['$ scope', ฟังก์ชั่น ($ scope) {}]); app.directive ('Magnifierright', ['Readjson', ฟังก์ชั่น (readjson) {return {จำกัด : 'ea', แทนที่: true, templateurl: 'magnifier-right.html', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr) scope.img2 = ข้อมูล [1];}); คอนเทนเนอร์ในขอบเขตด้านขวา rightBoxWidth = $ (องค์ประกอบ) .width (); console.log (radx); console.log (rady); }}}]); app.directive ('magnifiertop', [function () {return {จำกัด : 'ea', แทนที่: true, templateurl: 'magnifier-top.html', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr) {scope.topwidth = $ (องค์ประกอบ) ขอบเขต topheight = $ (องค์ประกอบ) .find ("img"). eq (scope.isactive) .height (); app.factory ('readjson', ['$ http', '$ q', ฟังก์ชั่น ($ http, $ q) {return {getjson: function () {var deverred = $ q.defer (); $ http ({method: 'get', url: 'magnifier.json'} deferred.resolve (ข้อมูล);สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันสงสัยว่าทุกคนได้เรียนรู้หรือไม่? ฉันหวังว่าบทความนี้จะช่วยในการศึกษาหรือทำงานของทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความและสื่อสาร