序文
最初はネイティブAngularjsで書くことを計画していましたが、ネイティブのAngularJSを使用して、とにかく写真の幅と高さを得ることができないことがわかりheight() winth()
jQueryを導入し、同じscopeで幅と高さをバインドする方が良いでしょう。以下のソースコードにアクセスしましょう。ところで、そのポイントのいくつかについて説明します。
複製図
まず第一に、説明しましょう
1.最初に、2つの同時命令が使用され、2つの同時命令の間で通信が行われます。同時指示間の通信は非常に単純です。つまり、同時命令が独立したscopeを生成し、同じ範囲でそれらを完了することを許可しません。指令scope特別な宣言がない場合、それは親のscopeです。指令によって生成されるテンプレートは、特定のscopeの下でコンパイルされない限り、特別な意味はありません。デフォルトでは、この指令は新しい子scopeを作成するのではなく、親scopeを使用します。つまり、指令がcontrollerの下に存在する場合、 controllerの下のscopeを使用します。
2.次に、 $qを使用して、データ収集を非同期に遅らせます。 $qの使用も確認できます。
ソースコードの例
<！doctype html> <html lang = "en" ng-app = "magnifierapp"> <head> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </<script src = "lib/angularimaise.js" type = "text/javascript"> </script> <script src = "lib/angular-animate.js" type = "text/javascript"> </scrip> <script src = "lib/jquery-2.1.4.min.js" type = "text/javascript"> </</head> <stly> <style> *{pad：0px;マージン：0px; } .content {width：800px;高さ：400px;位置：相対;境界線：1px固体赤; } .Left {width：310px;高さ：380px; } .top {width：310px;高さ：310px;ボーダー：1pxソリッドブルー;カーソル：ポインター; } .top img {width：310px;高さ：310px; } .bottom {position：relative;幅：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 magnifier-top> </div> <img src = "img/blue_1.jpg" ng-mouseover = "isactive = 0"/> <img src = "img/yellow_1.jpg" ng-mouseover = "isactive = 1"/> </div> </div viv> <div viv> <div viv> <div viv> <div viv> <div viv> <div viv> <div viv> <div vid}}+{{y}} < id = "magnifier-top.html"> <div ng-mousemove = "getposition（$ event.offsetx、$ event.offsety）" ng-mouseover = "isshow = true" ng-mouseleave = "isshow = fals"> <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 = "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'、false： 'hidden'} [isactive = 0] src = "{{img2.src}}" ng-class = "{true： 'show'、false： 'hidden'} [isactive == 1]"/> </div> </script> </div> </body> <scrip> var app = angular.module（ 'magnifierApp'、[]）; App.Controller（ 'MagnifierController'、['$ Scope'、function（$ scope）{}]）; app.directive（ 'magnifierright'、['readjson'、function（readjson）{return {restrict： 'ea'、lated：true、templateurl： 'magnifier-right.html'、link：function（scope、attr）{var promise = readjson.getjson（）; promise.then（function（data）{scope（scope）; scope.img2 = data [1];右側の容器の高さ= $（要素）.width（）; console.log（radx）; console.log（rady）; }}}]）; app.directive（ 'magnifiertop'、[function（）{return {restrict： 'ea'、falling：true、templateurl： 'magnifier-top.html'、link：function（scope、element、attr）{scope.topwidth = $（element）.find（ "img"）。eq（scope.isactive）。 scope.topheight = $（ement）。 app.Factory（ 'readjson'、['$ http'、 '$ q'、function（$ http、$ q）{return {getjson：function（）{var deferred = $ q.defer（）; $ http（{method： 'get'、url： 'magnifier.json'}）。 deferred.resolve（data）;要約します
上記は、この記事のコンテンツ全体です。誰もがそれを学んだのだろうか？この記事が皆の勉強や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残して通信してください。