Kata pengantar
Pada awalnya saya berencana untuk menulisnya di Native AngularJS, tetapi saya menemukan bahwa menggunakan AngularJs asli, saya tidak bisa mendapatkan lebar dan tinggi gambar di dalamnya, karena metode jquery bawaan dari AngularJS tidak memiliki metode winth() height() .
Akan lebih baik jika saya memperkenalkan jQuery dan mengikat lebar dan tinggi pada scope yang sama. Mari kita pergi ke kode sumber di bawah ini, dan omong -omong, saya akan berbicara tentang beberapa poin di dalamnya.
Diagram reproduksi
Pertama -tama, mari kita jelaskan
1. Pertama, dua instruksi simultan digunakan dan komunikasi dilakukan antara dua instruksi simultan. Komunikasi antara instruksi simultan sangat sederhana, yaitu, tidak mengizinkan instruksi simultan untuk menghasilkan scope independen dan melengkapi mereka di bawah ruang lingkup yang sama. Jika scope arahan tidak memiliki deklarasi khusus, maka itu adalah scope induk. Templat yang dihasilkan oleh Petunjuk tidak memiliki makna khusus kecuali disusun di bawah scope tertentu. Secara default, arahan tidak membuat scope anak baru, tetapi menggunakan scope induk. Artinya, jika arahan ada di bawah controller , itu akan menggunakan scope di bawah controller .
2. Kemudian gunakan $q untuk menunda akuisisi data secara tidak sinkron. Anda juga dapat melihat penggunaan $q .
Contoh Kode Sumber
<!DOCTYPE html><html lang="en" ng-app="magnifierAPP"><head> <meta charset="UTF-8"> <title></title> <script src="lib/angular.min.js" type="text/javascript"></script> <script src="lib/angular-animate.js" type = "Text/JavaScript"> </script> <skrip src = "lib/angular-animate.js" type = "text/javascript"> </ptript> <script src = "lib/jQuery-2.1.4.min.js" type = "text/javaScript"> </script> </head> head> "type =" Text/JavaScript "> </script> </head> head> head> margin: 0px; } .content {width: 800px; Tinggi: 400px; Posisi: kerabat; Perbatasan: 1px solid red; } .left {width: 310px; Tinggi: 380px; } .top {lebar: 310px; Tinggi: 310px; Perbatasan: 1px Solid Blue; kursor: pointer; } .top img {width: 310px; Tinggi: 310px; } .bottom {position: relatif; Lebar: 310px; Tinggi: 60px; Perbatasan: 1px solid black; } .bottom img {display: inline-block; Lebar: 60px; Tinggi: 60px; float: kiri; Margin: 0 30px; kursor: pointer; } .right {border: 1px solid; Lebar: 300px; Tinggi: 300px; Posisi: Absolute; Kiri: 400px; Atas: 20px; meluap: tersembunyi; } .right img {position: absolute; Lebar: 700px; Tinggi: 600px; } .show {display: block; } .hidden {display: none; } </style> <body> <v div ng-controller = "magnifierController"> <div> <div ng-init = "isActive = 0"> <verv> {{x}}+{{y}} </div> <v magnifier-top> </div> <v div> <mmg src = " ng-mouseOver = "isActive = 0"/> <img src = "img/yellow_1.jpg" ng-mouseover = "isActive = 1"/> </div> </div> <v Magnifier-right> </Div> {{x} {nck = {{y}} </Div> </div> "div> </nck =" nck = "nck =" nck = "nck =" nck = "nck =" nck = "nck =" nck = "nck =" n. " id = "magnifier-top.html"> <div ng-mousemove = "getPosition ($ event.offsetx, $ event.offsety)" ng-mouseover = "isshow = true" ng-mouseleave = "isshow = false"> <img src = "img/blue_2.jpg" ng-class = "{true: 'show', false: 'hidden'} [isActive == 0]"/> <img src = "img/yellow_2.jpg" ng-class = "{true: 'show', false: 'hidden'} [isActive == 0]"/<img src = "iMg/iMg/yellow =" ng-class = "{true: 'show', false: 'hidden'} [isActive == 1]"/> </div> </script> <script type = "text/ng-template" id = "magnifier-right.html"> <v> <img src = "{{img1.src}" ng-class = "{true: 'show', false: 'hidden'} [isActive == 0]" id = "img1"/> <img src = "{{img2.src}}" ng-class = "{true: 'show', false: 'hidden'} [ISACTIF == 0]" src = "{{img2.src}}" ng-class = "{true: 'show', false: 'hidden'} [isActive == 1]"/> </div> </script> </div> </body> <script> var app = angular.module ('expurifierapp', []; app.controller ('magnifierController', ['$ scope', function ($ scope) {}]); app.directive ('magnifierright', ['readjson', function (readjson) {return {restrict: 'ea', ganti: true, templateUrl: 'magnifier-right.html', link: function (scope, elemen, attr) {var janji = readjson.getjson (); janji (function, function) {var janji = readjson.getjson (); janji. scope.img2 = data [1]; dan Tinggi Wadah di Sisi Sisi Kanan rady = scope.righheight-scope.rightboxheight) /scope.topheight; "Top":-Scope.y*Rady+"PX"});})}, 30)}}}}]); app.directive ('magnifierTop', [function () {return {restrict: 'ea', ganti: true, templateUrl: 'magnifier-top.html', tautan: fungsi (lingkup, elemen, attr) {scope.topwidth = $ (elemen) .find ("img"). EQ (scope.topwidth = $ (elemen). scope.topheight = $ (elemen) .find ("img"). eq (scope.isactive) .height (); app.factory ('readjson', ['$ http', '$ q', function ($ http, $ q) {return {getjson: function () {var ditangguhkan = $ q.defer (); $ http ({Method: 'get', url: 'exgerifier.json'}). }). ERROR (FUNGSI (DATA, STATUS, HEADER, CONFIR) {Deferred.Rect (data);});Meringkaskan
Di atas adalah seluruh konten artikel ini. Saya ingin tahu apakah semua orang telah mempelajarinya? Saya harap artikel ini akan membantu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan dan berkomunikasi.