Préface
Au début, j'avais prévu de l'écrire dans AngularJS natif, mais j'ai trouvé que l'utilisation d'angularjs natifs, je ne pouvais pas obtenir la largeur et la hauteur de l'image de toute façon, car la méthode jQuery intégrée d'AngularJS n'a pas de méthodes winth() height() .
Il serait préférable que j'ai introduit jQuery et lié la largeur et la hauteur sur la même scope . Passons au code source ci-dessous, et au fait, je parlerai de certains points.
Diagramme de reproduction
Tout d'abord, expliquons
1. Premièrement, deux instructions simultanées sont utilisées et la communication est effectuée entre deux instructions simultanées. La communication entre les instructions simultanées est très simple, c'est-à-dire ne pas permettre aux instructions simultanées de générer scope indépendantes et de les compléter sous la même portée. Si la scope de la directive n'a pas de déclaration spéciale, c'est la scope des parents. Le modèle généré par la directive n'a aucune signification particulière à moins qu'il ne soit compilé sous une scope spécifique. Par défaut, la directive ne crée pas une nouvelle scope enfant, mais utilise la scope des parents. Autrement dit, si la directive existe sous un controller , il utilisera scope sous controller .
2. Ensuite, utilisez $q pour retarder l'acquisition de données de manière asynchrone. Vous pouvez également voir l'utilisation de $q .
Exemple de code source
<! Doctype html> <html lang = "en" ng-app = "MagnifierApp"> <éadf> <meta charset = "utf-8"> <itle> </ title> <script src = "lib / angular.min.js" type = "text / javascript"> </ script> <script src = "lib / angular-anate. type = "text / javascript"> </ script> <script src = "lib / angular-animate.js" type = "text / javascript"> </ script> <script src = "lib / jQuery-2.1.4min.js" type = "text / javascript"> </ script> </ head> <ystyle> * {{padding: 0px; marge: 0px; } .Content {width: 800px; hauteur: 400px; Position: relative; Border: 1px rouge solide; } .left {largeur: 310px; hauteur: 380px; } .top {width: 310px; hauteur: 310px; Border: 1px bleu massif; curseur: pointeur; } .top img {width: 310px; hauteur: 310px; } .bottom {position: relative; Largeur: 310px; hauteur: 60px; Border: 1px noir solide; } .bottom img {affichage: bloc en ligne; Largeur: 60px; hauteur: 60px; flottant: à gauche; marge: 0 30px; curseur: pointeur; } .Right {border: 1px solide; Largeur: 300px; hauteur: 300px; Position: absolue; Gauche: 400px; En haut: 20px; débordement: caché; } .Right img {position: absolu; Largeur: 700px; Hauteur: 600px; } .show {affichage: bloc; } .hidden {affichage: aucun; } </ style> <body> <div ng-controller = "MagnifierController"> <div> <div ng-init = "isActive = 0"> <div> {{x}} + {{y}} </div> <div Magnifier-top> </div> <v> <img src = "img / blue_1.jpg" Ng-MouseOver = "isActive = 0" /> <img src = "img / yellow_1.jpg" ng-souover = "isActive = 1" /> </ div> </ div> <div Magnifier-right> <div> {{x}} + {{y}} </v> </v> </v> <script type = "Text / Ng-TEMPE" id = "Magnifier-top.html"> <div ng-mousemove = "getPosition ($ event.offsetx, $ event.offsety)" ng-souover = "iSShow = true" ng-mouseave = "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 / jaune_2.jpg" ng-class = "{true: 'show', false: 'Hidden'} [isactive == 1]" /> </ div> </ script> <script type = "text / ng-template" id = "Magnifier-droite.html"> <div> <img src = "{{img1.src}}" ng-Class = "{true: 'show', false: 'Hidden'} [isActive == 0]" id = "img1" /> <img src = "{{img2.src}}" ng-Class = "{true: 'show', false: '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 ('MAGIFIERAPP', []); app.Controller ('MagnifierController', ['$ scope', fonction ($ scope) {}]); app.directive ('MagnifierRight', ['Readjson', fonction (Readjson) {return {restrict: 'ea', remplacer: true, templateUrl: 'Magnifier-droite.html', link: function (scope, élément, att) {var promesse = readjson.getjson (); promesse.Then (function (data) {scope.img1 = data [0]; Scope.img2 = Data [1];}); Le conteneur sur le côté droit Scope.RightBoxWidth = $ (élément) .Width (); console.log (radx); console.log (rady); }}}]); app.Directive ('MAGNIFIERERTOP ", [function () {return {restrict:' ea ', remplace: true, templateUrl:' Magnifier-pop.html ', link: function (scope, élément, att) {scope.topwidth = $ (élément) .Find (" img "). eq (scope.isactive) .width (); scope.topheight = $ (élément) .Find ("img"). eq (scope.isactive) .Height (); app.factory ('Readjson', ['$ http', '$ q', fonction ($ http, $ q) {return {getJson: function () {var deferred = $ q.defer (); $ http ({méthode: 'get', url: 'magnifier.json'}). Success (function, data, status, handing, config) { Deferred.Resolve (données);}). Erreur (Fonction (Données, Status, en-tête, config) {Deferred.Reject (Data);});Résumer
Ce qui précède est l'intégralité du contenu de cet article. Je me demande si tout le monde l'a appris? J'espère que cet article sera d'une aide à l'étude ou au travail de chacun. Si vous avez des questions, veuillez laisser un message et communiquer.