Prefácio
A princípio, planejei escrevê-lo no AngularJS nativo, mas descobri que, de qualquer maneira, usando o uso de angulares nativos, não conseguia obter a largura e a altura da imagem de qualquer maneira, porque o método jQuery interno do AngularJS não possui métodos winth() height() .
Seria melhor se eu introduzisse o jQuery e vinculasse a largura e a altura no mesmo scope . Vamos ao código -fonte abaixo e, a propósito, falarei sobre alguns dos pontos nele.
Diagrama de reprodução
Primeiro de tudo, vamos explicar
1. Primeiro, duas instruções simultâneas são usadas e a comunicação é realizada entre duas instruções simultâneas. A comunicação entre instruções simultâneas é muito simples, ou seja, não permite instruções simultâneas para gerar scope independentes e completá -los no mesmo escopo. Se o scope da diretiva não tiver declaração especial, é o scope dos pais. O modelo gerado pela diretiva não tem significado especial, a menos que seja compilado sob um scope específico. Por padrão, a diretiva não cria um novo scope filho, mas usa o scope dos pais. Ou seja, se a diretiva existir sob um controller , ele usará scope sob controller .
2. Em seguida, use $q para atrasar a aquisição de dados de forma assíncrona. Você também pode ver o uso de $q .
Exemplo de código -fonte
<! Doctype html> <html lang = "en" ng-app = "MagnifierApp"> <head> <meta charset = "utf-8"> <titter> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </script> type = "text/javascript"> </script> <script src = "lib/angular-anmate.js" type = "text/javascript"> </sCript> <script src = "lib/jQuery-2.1.4.min.js" type = "text/javascript"> </script> </script> margem: 0px; } .Content {Width: 800px; Altura: 400px; Posição: relativa; borda: 1px vermelho sólido; } .left {width: 310px; Altura: 380px; } .top {width: 310px; Altura: 310px; borda: 1px azul sólido; Cursor: Ponteiro; } .top img {width: 310px; Altura: 310px; } .bottom {Position: relativo; Largura: 310px; Altura: 60px; borda: 1px preto sólido; } .bottom img {display: inline-block; Largura: 60px; Altura: 60px; flutuar: esquerda; margem: 0 30px; Cursor: Ponteiro; } .right {Border: 1px Solid; Largura: 300px; Altura: 300px; Posição: Absoluto; Esquerda: 400px; topo: 20px; estouro: oculto; } .right IMG {Posição: Absolute; Largura: 700px; Altura: 600px; } .show {display: block; } .hidden {display: Nenhum; } </style> <body> <div ng--controller = "MagnifierController"> <div> <div ng-init = "isactive = 0"> <div> {{x}}+{{y}}} </div> <div Magnifier> </div> <div> <iMg Src = "img) ng-mouseover = "isactive = 0"/> <img src = "img/amarelo_1.jpg" ng-mouseover = "isactive = 1"/> </div> </div> <divagsier-right> <div> {{x}}+{y}}} </> </> </> </div> {{x}}+{y}}}} </> </> id = "MONGIPER-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/amarelo_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> <img src = "{{) ng-class = "{true: 'show', false: 'Hidden'} [isactive == 0]" id = "img1"/> <img src = "{{img2.src}}" ng-class = "{true: 'show', false: 'Hidden'} [isactive == 0] src = "{{img2.src}}" ng-class = "{true: 'show', false: 'hidden'} [isactive == 1]"/> </div> </cript> </div> </body> <cript> var app = angular.module ('magniPrapp', []; App.Controller ('MagnifierController', ['$ scope', função ($ scope) {}]); App.Directive ('Magnifierright', ['readjson', function (readjson) {return {restrive: 'ea', reply: true, templateurl: 'MONGIPER-RIGHT.html', link: function (scope, elemento, attr) {var prometo = readjson.getjson (); prometo.then] (data) {data) {var = readjson.getjson (); prometo.then (data) {data) {var = readjson.getjson (); prometo.then (data) {data) {var = readjson.getJson (); Scope.img2 = Dados [1]; Contêiner no lateral direito. console.log (radx); }}]); App.Directive ('MagnifiERTOP', [function () {return {Restrive: 'ea', substituir: true, templateurl: 'Magnifier top.html', link: function (escopo, elemento, att) {scope.topwidth = $ (element) .find ("img"). scope.topheight = $ (elemento) .find ("img"). Eq (scope.isactive) .Height (); App.Factory ('readjson', ['$ http', '$ q', função ($ http, $ q) {return {getjson: function () {var diferred = $ q.defer (); $ http ({método: 'get', url: 'Magnier.json'}). diferido.Resolve (Data);Resumir
O acima é o conteúdo inteiro deste artigo. Gostaria de saber se todo mundo aprendeu? Espero que este artigo seja de ajuda para estudar ou trabalhar de todos. Se você tiver alguma dúvida, deixe uma mensagem e se comunique.