머리말
처음에 나는 기본 AngularJS로 글을 쓸 계획 이었지만, 기본 AngularJS를 사용하여 그림의 winth() 와 height() 를 얻을 수 없다는 것을 알았습니다.
jQuery를 도입하고 같은 scope 에서 너비와 높이를 묶는 것이 더 나을 것입니다. 아래의 소스 코드로 가서 그 안에있는 몇 가지 요점에 대해 이야기하겠습니다.
복제 다이어그램
우선, 설명합시다
1. 첫째, 두 개의 동시 지침이 사용되며 두 개의 동시 지침간에 의사 소통이 수행됩니다. 동시 지침 간의 의사 소통은 매우 간단합니다. 즉, 동시 지침이 독립적 인 scope 생성하고 동일한 범위로 완료하도록 허용하지 않습니다. 지침 scope 특별한 선언이 없으면 부모의 scope 입니다. 지침에 의해 생성 된 템플릿은 특정 scope 로 컴파일되지 않는 한 특별한 의미가 없습니다. 기본적으로 지침은 새로운 자식 scope 생성하지 않지만 부모의 scope 사용합니다. 즉, 지침이 controller 아래에 존재하는 경우 controller 아래의 scope 사용합니다.
2. 그런 다음 $q 사용하여 데이터 수집을 비동기로 지연시킵니다. $q 의 사용을 볼 수 있습니다.
소스 코드 예제
<! docType html> <html lang = "en"ng-app = "magnifierapp"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js"tapt/javascript "> 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"> 여백 : 0px; } .Content {너비 : 800px; 높이 : 400px; 위치 : 상대; 테두리 : 1px 솔리드 레드; } .left {너비 : 310px; 높이 : 380px; } .top {너비 : 310px; 높이 : 310px; 테두리 : 1px 솔리드 블루; 커서 : 포인터; } .top img {너비 : 310px; 높이 : 310px; } .bottom {위치 : 상대; 너비 : 310px; 높이 : 60px; 국경 : 1px 솔리드 블랙; } .bottom img {디스플레이 : 인라인-블록; 너비 : 60px; 높이 : 60px; 플로트 : 왼쪽; 여백 : 0 30px; 커서 : 포인터; }. 오른쪽 {테두리 : 1px 고체; 너비 : 300px; 높이 : 300px; 위치 : 절대; 왼쪽 : 400px; 상단 : 20px; 오버플로 : 숨겨진; }. 오른쪽 img {위치 : 절대; 너비 : 700px; 높이 : 600px; } .show {display : 블록; } .hidden {디스플레이 : 없음; . ng-mouseover = "isactive = 0"/> <img src = "img/ellow_1.jpg"ng-mouseover = "isactive = 1"/> </div> </div> <div magnifier-right> <div> {{x}}+{y}} </div> <script> <text/ng-tempate " 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', 'hidden'} 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', 'hidden'} [isactive = 0]"img1 "/> <img src = "{{img2.src}}"ng class = "{true : 'show', false : 'hidden'} [isactive == 1]"/> </div> </div> </body> <script> var app = angular.module ( 'magnifierApp', []); app.controller ( 'magnifiercontroller', [ '$ scope', function ($ scope) {}]); app.directive ( 'magnifierright', [ 'readjson', function (readjson) {return {return {extrict : 'ea', 'ea', templateUrl : 'magnifier-right.html', 링크 : 함수 (스코프, 요소, attr) {var promy = readjson.getjson (); promise (function) {scope.img1 = data [0]; SCOPE.IMG2 = DATE는 오른쪽 스코프의 컨테이너의 폭과 높이입니다 오른쪽 범위의 컨테이너. console.log (radx); }}}]); app.directive ( 'magnifiertop', [function () {return {return {extrict : 'ea', replare : true, templateUrl : 'magnifier-top.html', 링크 : function (scope, element, att scope.topheight = $ (emg). eq (scope.isActive). app.factory ( 'readjson', [ '$ http', '$ q', function ($ http, $ q) {return {let Deferred.resolve (data)}요약
위는이 기사의 전체 내용입니다. 모두가 그것을 배웠는지 궁금합니다. 이 기사가 모든 사람의 연구 나 업무에 도움이되기를 바랍니다. 궁금한 점이 있으시면 메시지를 남겨두고 의사 소통하십시오.