مقدمة
في البداية ، خططت لكتابته في AngularJs الأصليين ، لكنني وجدت أن باستخدام AngularJs الأصليين ، لم أستطع الحصول على عرض وارتفاع الصورة فيه على أي حال ، لأن طريقة jQuery المدمجة من 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 src. type = "text/javaScript"> </script> <script src = "lib/Angular-animate.js" type = "text/javaScript"> </script> <script src = "lib/jquery -2.1.4.min.js الهامش: 0px ؛ } .Content {width: 800px ؛ الارتفاع: 400 بكسل ؛ الموقف: قريب الحدود: 1 بكسل صلب أحمر. } .LEFT {width: 310px ؛ الارتفاع: 380 بكسل ؛ } .top {width: 310px ؛ الارتفاع: 310px ؛ الحدود: 1 بكسل الأزرق الصلب. المؤشر: مؤشر. } .top img {width: 310px ؛ الارتفاع: 310px ؛ } .bottom {الموضع: النسبي ؛ العرض: 310px ؛ الارتفاع: 60px ؛ الحدود: 1 بكسل سوداء صلبة. } .bottom img {display: inline block ؛ العرض: 60px ؛ الارتفاع: 60px ؛ تعويم: اليسار. الهامش: 0 30px ؛ المؤشر: مؤشر. } .right {border: 1px solid ؛ العرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ الموقف: مطلق ؛ اليسار: 400 بكسل ؛ أعلى: 20 بكسل ؛ الفائض: مخفي. . العرض: 700 بكسل ؛ الارتفاع: 600 بكسل ؛ } .Show {Display: Block ؛ } .hidden {display: none ؛ } </style> <body> <div ng-controller = "MagnifierController"> <viv> <div ng-init = "isactive = 0"> <viv> {{x}}+{{y}} </div> <div maggeier-top> <iv> <img src = "img/blue_1 ng-mouseover = "isactive = 0"/> <img src = "img/yellow_1.jpg" ng-mouseover = "isactive = 1"/> </viv> </viv> <div magnifier-right> <viv> {{x}}} {{y}}} </div> </div> </div> id = "magnifier-top.html"> <div ng-mousemove = "getPosition ($ event.offsetx ، $ event.offsety)" ng-mouseover = "iSshow = true" ng-mouseleve = "iSshow = false"> <img src = "img/blue_2.jpg" ng-class = "{true: 'show' ، false: 'Hidden'} [iscisty == 0]"/> <img src = "img/yellow_2.jpg" ng-class = "{true:" show "، false:" hidden '} [isactive == 0] "/> <img src = ng-class = "{true: 'show' ، false: 'hidden'} [isactive == 1]"/> </viv> </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 = "{{img2.src}}" ng-class = "{true: 'show' ، false: 'hidden'} [isactive == 1]"/> </viv> </script> </viv> </body> <script> var app = Angular.Module ('megenfierapp' ، []) ؛ App.Controller ('MagnifierController "، [' $ scope '، function ($ scope) {}]) ؛ app.directive ('magnifierright' ، ['readjson' ، function (readjson) {return {restrict: 'ea' ، reply: true ، templateurl: 'magnifier-right.html' ، link: function ، element ، attr) {var promise = readjson.getjson () ؛ Scope.Img2 = 1] ؛ الحاوية على نطاق الجانب الأيمن. console.log (Radx) ؛ }}}]) ؛ app.directive ('magnifiertop' ، [function () {return {rody: 'ea' ، reply: true ، templateurl: 'machifier-top.html' ، link: function (scope ، element ، attr) {scope.topwidth = $ (element) .find ("img"). Scope.topheight = $ (element) .find ("IMG"). app.factory ('readjson' ، ['$ http' ، '$ q' ، function ($ http ، $ q) {return {getjson: function () {var efferred = $ q.defer () ؛ $ http ({method: 'get' ، url: 'megenfier.json'}). efferred.Resolve (Data) ؛لخص
ما سبق هو المحتوى الكامل لهذه المقالة. أتساءل ما إذا كان الجميع قد تعلم ذلك؟ آمل أن يكون هذا المقال بعض المساعدة في دراسة أو عمل الجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة والتواصل.