Vorwort
Zuerst hatte ich vor, es in native AngularJs zu schreiben, aber ich fand, dass ich mit nativen AngularJs sowieso nicht die Breite und Höhe des Bildes erhalten konnte, da die eingebaute JQuery-Methode von AngularJs keine winth() height() Methoden hat.
Es wäre besser, wenn ich JQuery einführen und die Breite und Höhe am selben scope begrenzen würde. Gehen wir zum Quellcode unten und übrigens werde ich über einige Punkte darin sprechen.
Reproduktionsdiagramm
Lassen Sie uns zunächst erklären
1. Zunächst werden zwei gleichzeitige Anweisungen verwendet und die Kommunikation zwischen zwei gleichzeitigen Anweisungen durchgeführt. Die Kommunikation zwischen gleichzeitigen Anweisungen ist sehr einfach, dh zulässt, dass gleichzeitige Anweisungen unabhängige scope erzeugen und sie unter demselben Bereich vervollständigen. Wenn der scope keine besondere Erklärung enthält, ist es das übergeordnete scope . Die von der Richtlinie generierte Vorlage hat keine besondere Bedeutung, es sei denn, sie wird unter einem bestimmten scope zusammengestellt. Standardmäßig erstellt die Anweisung kein neues scope , sondern verwendet den übergeordneten scope . Das heißt, wenn die Richtlinie unter einem controller vorhanden ist, verwendet sie scope unter controller .
2. Verwenden Sie dann $q , um die Datenerfassung asynchron zu verzögern. Sie können auch die Verwendung von $q sehen.
Beispiel für Quellcode
<! DocType html> <html lang = "en" ng-App = "Magnifierapp"> <head> <meta charset = "utf-8"> <titels> </title> <script src = "lib/angular.min.js" type 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"></script></head><style> *{ padding: 0px; Rand: 0px; } .Content {width: 800px; Höhe: 400px; Position: Relativ; Grenze: 1px solide Rot; } .left {width: 310px; Höhe: 380px; } .top {width: 310px; Höhe: 310px; Grenze: 1px fest blau; Cursor: Zeiger; } .top img {width: 310px; Höhe: 310px; } .bottom {Position: relativ; Breite: 310px; Höhe: 60px; Grenze: 1PX Solid Black; } .bottom img {display: Inline-Block; Breite: 60px; Höhe: 60px; float: links; Rand: 0 30px; Cursor: Zeiger; } .Right {Border: 1px solide; Breite: 300px; Höhe: 300px; Position: absolut; Links: 400px; Top: 20px; Überlauf: versteckt; } .Right img {Position: absolut; Breite: 700px; Höhe: 600px; } .show {display: block; } .hidden {display: keine; } </style> <body> <div ng-controller = "MagnifierController"> <div> <div ng-init = "isactive = 0"> <div> {{x}}+{{y}}} </div> <divier-top> </> </div> <img src = "img/" img/"img/" img/"img/" img/"img/" img/"img/" img/"img/" img/"img/" img/"img/" img/"img/" img/"img/" img/"img/" iMg/"img/" img/"img/" img/"img/" iMg/"iMg/" IMG/". ng-mouseover="isActive=0"/> <img src="img/yellow_1.jpg" ng-mouseover="isActive=1"/> </div> </div> <div magnifier-right> <div>{{x}}+{{y}}</div> </div> </div> <script type="text/ng-template" 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: 'versteckt'} [isactive == 0]"/> <img src = "img/gelb_2.jpg" ng-class = "{true: 'show', false: 'Hidden'} [isactive == 0]/> <img Src =" img/Yellow/Yellow_2.jpg ". ng-class = "{true: 'show', false: 'versteckt'} [isactive == 1]"/> </div> </script> <script type = "text/ng-template" id = "Magnifier-right.html"> <div> <img src = "{{{img1.src}}}}" ng-class = "{true: 'show', false: 'versteckt'} [isactive == 0]" id = "img1"/> <img src = "{{img2.src}}" ng-class = "{true: 'show', false: 'Hidden'} [isactive == 0]" id = "id =" id = "id =" id = "i img1"/<img1 "/<img1"/<img1 "/<img1"/<img1 "/<img1"/<img1 "/<img1"/<img1 "/<img1"/<ing1 "/<ing1"/<img. src = "{{img2.src}}" ng-class = "{true: show ', false:' Hidden '} [isActive == 1]"/> </div> </script> </div> </body> <script> var app = Angular.module (' Magnifierapp ', []); app.Controller ('MagnifierController', ['$ scope', function ($ scope) {}]); app.directive ('Magnifierright', ['Readjson', Funktion (Readjson) {return {Restrict: 'ea', ersetzen: true, templateurl: 'Magnifier-right.html', link: function (scope, element, attr) {var varque = readjson.getJson (); Scope.img2 = Daten [1]; Container auf der rechten Seite. console.log (radx); }}}]); app.directive ('Magnifiertop', [function () {retrict {prestrict: 'ea', ersetzen: true, templateurl: 'Magnifier-top.html', link: function (Scope, Element, attr) {scope.topwidth = $ (element). scope.topheight = $ (element). app.factory ('readjson', ['$ http', '$ q', function ($ http, $ q) {return {getJson: function () {var deferred = $ q.Defer (); aufgeschoben.Resolve (Daten);Zusammenfassen
Das obige ist der gesamte Inhalt dieses Artikels. Ich frage mich, ob jeder es gelernt hat? Ich hoffe, dieser Artikel wird für das Studium oder die Arbeit aller helfen. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht und kommunizieren Sie.