Предисловие
Сначала я планировал написать его в Native Angularjs, но я обнаружил, что использование Native Angularjs, я не мог получить ширину и высоту изображения в нем в любом случае, потому что встроенный метод jQuery of AngularJS не имеет методов winth() height() .
Было бы лучше, если бы я ввел jQuery и связал ширину и высоту на той же scope . Давайте перейдем к исходному коду ниже, и, кстати, я расскажу о некоторых моментах в нем.
Диаграмма воспроизведения
Прежде всего, давайте объясним
1. Во -первых, используются две одновременные инструкции, и между двумя одновременными инструкциями проводится связь. Связь между одновременными инструкциями очень проста, то есть не позволяет одновременным инструкциям генерировать независимые scope и завершать их под той же охватом. Если scope директивы не имеет особого объявления, то это родительская scope . Шаблон, сгенерированный директивой, не имеет особого значения, если он не составлен под определенной scope . По умолчанию директива не создает новую работу дочернего scope , но использует родительский scope . То есть, если директива существует под controller , она будет использовать scope под controller .
2. Затем используйте $q , чтобы задержать получение данных асинхронно. Вы также можете увидеть использование $q
Пример исходного кода
<! 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- angular- ' 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> </hade> <stile> *{padding: 0px; поля: 0px; } .content {width: 800px; Высота: 400px; позиция: относительно; Граница: 1px твердый красный; } .left {width: 310px; Высота: 380px; } .top {width: 310px; Высота: 310px; Граница: 1px твердый синий; курсор: указатель; } .top img {width: 310px; Высота: 310px; } .bottom {позиция: относительно; Ширина: 310px; Высота: 60px; Граница: 1px твердый черный; } .bottom img {display: inline block; Ширина: 60px; Высота: 60px; Плавание: осталось; Полевая: 0 30px; курсор: указатель; } .right {border: 1px solid; Ширина: 300px; Высота: 300px; позиция: абсолютно; Слева: 400px; Верх: 20px; переполнение: скрыто; } .right img {position: Absolute; Ширина: 700px; Высота: 600px; } .show {display: block; } .hidden {display: none; } </style> <body> <div ng-controller = "MagnifierController"> <div> <div ng-init = "isactive = 0"> <div> {x}}+{{y}} </div> <div Marifier-top> </div> <div> <img src = "img/blue_1.jpg" ng-mouseover = "isactive = 0"/> <img src = "img/hello_1.jpg" ng-mouseover = "isactive = 1"/> </div> </div> <div Mignifier-Right> <div> {{x}}+{{y}} </div> </div> </div> <screen/x-type 'ng-tempe' 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/hello_2.jpg" ng-class = "{true: 'show', false: 'hidden'} [isactive == 0]"/> <img src = "img/illow_2. ng-class = "{true: 'show', false: 'hidden'} [isactive == 1]"/> </div> </script> <script type = "text/ng-template" id = "magnifier-right.html"> <viv> <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 = "img"/> <img "/> <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 {ограничить: 'ea', заменить: true, templateurl: 'Magnifier-right.html', link: function (actope, element, attr) {var ordy = readjson.getjson (); propect.then (function) {scope.img1 = data1 = date. Scope.img2 = Data [1]; Контейнер на правой стороне. console.log (Radx); }}}]); app.directive ('magnifiertop', [function () {return {restrict: 'ea', заменить: true, templateurl: 'Magnifier-top.html', ссылка: функция (сфера, элемент, attr) {scope.topwidth = $ (element). find ("img"). eq (scope.iSactive). scope.topheight = $ (element) .find ("img"). EQ (Scope.isactive) .height (); app.factory ('readjson', ['$ http', '$ q', function ($ http, $ q) {return {getjson: function () {var deferred = $ q.defer (); $ http ({method: 'get', url: 'Magnifier.json'}). DEFERRED.Resolve (DATA);Суммировать
Вышеуказанное - все содержание этой статьи. Интересно, все ли это узнали? Я надеюсь, что эта статья поможет всем, кто учится или работа. Если у вас есть какие -либо вопросы, пожалуйста, оставьте сообщение и сообщите.