Prefacio
Al principio planeé escribirlo en AngularJs nativos, pero descubrí que, usando AngularJ nativos, no podía obtener el ancho y la altura de la imagen de todos modos, porque el método JQuery incorporado de AngularJS no tiene métodos winth() height() .
Sería mejor si introdujera jQuery y vinculara el ancho y la altura en el mismo scope . Vamos al código fuente a continuación, y por cierto, hablaré sobre algunos de los puntos en él.
Diagrama de reproducción
En primer lugar, explicemos
1. Primero, se utilizan dos instrucciones simultáneas y se realiza la comunicación entre dos instrucciones simultáneas. La comunicación entre las instrucciones simultáneas es muy simple, es decir, no permita que las instrucciones simultáneas generen scope independientes y los complete bajo el mismo alcance. Si el scope de la directiva no tiene una declaración especial, entonces es el scope principal. La plantilla generada por la Directiva no tiene un significado especial a menos que se compile bajo un scope específico. Por defecto, la Directiva no crea un nuevo scope infantil, pero usa el scope principal. Es decir, si la directiva existe bajo un controller , usará scope debajo controller .
2. Luego use $q para retrasar la adquisición de datos de forma asincrónica. También puede ver el uso de $q
Ejemplo del código fuente
<! DocType html> <html lang = "en" ng-app = "MagnifierApp"> <HEAD> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javaScript"> </scritch> <scritch src = "lib/angular-animate.js" type = "text/javaScript"> </script> <script src = "lib/angular-animate.js" type = "text/javascript"> </script> <script src = "lib/jquery-2.1.4.4Min.js" type = "text/javaScript"> </script> </head> <style> *{padding: 0px; margen: 0px; } .content {ancho: 800px; Altura: 400px; Posición: relativo; borde: 1px rojo sólido; } .left {ancho: 310px; Altura: 380px; } .top {ancho: 310px; Altura: 310px; borde: 1px azul sólido; cursor: puntero; } .top img {ancho: 310px; Altura: 310px; } .bottom {posición: relativo; Ancho: 310px; Altura: 60px; borde: 1px negro sólido; } .bottom img {display: inline-block; Ancho: 60px; Altura: 60px; flotante: izquierda; margen: 0 30px; cursor: puntero; } .Right {border: 1px sólido; Ancho: 300px; Altura: 300px; Posición: Absoluto; Izquierda: 400px; Arriba: 20px; desbordamiento: oculto; }. derecho img {posición: absoluto; Ancho: 700px; Altura: 600px; } .show {display: block; } .hidden {display: none; } </style> <body> <div Ng-Controller = "MagnifierController"> <Viv> <div ng-init = "isActive = 0"> <div> {{x}}+{{y}} </div> <d div Magnifier-top> </div> <div> <mg src = "img/blue_1.jpgg" " ng-mouseover = "isActive = 0"/> <img src = "img/Yellow_1.jpg" ng-mouseover = "isActive = 1"/> </div> </div> <div Magnifier-right> <div> {{x}}+{{y}} </div> </div> </iv> <scripti 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/yellow_2.jpg" " ng-class = "{true: 'show', false: 'hidden'} [isActive == 1]"/> </div> </script> <script type = "text/ng-template" id = "magnifier-right.html"> <div> <img src = "{{img1.src}" "" "" "" "" "" "" "" "" "" "" "" "" "," "" "" "" "" "" "" "," "" " ng-class = "{true: 'show', false: 'Hidden'} [isActive == 0]" id = "img1"/> <img src = "{{img2.src}}" ng-class = "{true: 'show', falso: 'Hidden'} [isActive == 0]" id = "img1"/> <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', function (readjson) {return {restrict: 'ea', reemplazar: true, templateUrl: 'Magnifier-right.html', link: function (scope, element, attr) {var promise = readJson.getjson (); promet.then (function (data) {scope.img1 = data. scope.img2 = data [1]; Altura del contenedor en el alcance del lado derecho. console.log (radx); }}}]); app.directive ('magnifiertop', [function () {return {restrict: 'ea', reemplazar: true, templateUrl: 'magnifier-top.html', link: function (scope, element, attr) {scope.topwidth = $ (element) .find ("img"). eq (scope.isactive) .width (); scope.topheight = $ (elemento) .find ("img"). EQ (Scope.Isactive) .Height (); app.factory ('readjson', ['$ http', '$ q', function ($ http, $ q) {return {getJson: function () {var deferred = $ q.defer (); $ http ({método: 'get', url: 'magnifier.json'}). Success (function (data, status, status, senter) Deferred.resolve (datos);Resumir
Lo anterior es todo el contenido de este artículo. Me pregunto si todos lo han aprendido. Espero que este artículo sea de ayuda para el estudio o el trabajo de todos. Si tiene alguna pregunta, deje un mensaje y comuníquese.