序文
最初はネイティブ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);要約します
上記は、この記事のコンテンツ全体です。誰もがそれを学んだのだろうか?この記事が皆の勉強や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残して通信してください。