مقدمة خلفية
هذا المثال هو مثال في الفيديو ، هناك سوبرمان ديناميكي ، مع ثلاث قدرات ، قوة القوة ، سرعة السرعة ، ضوء التوهج.
يتم استخدام هذه القدرات الثلاث كثلاث سمات ، وتعرف Superman الديناميكي كعلامة. يمكنك الحصول على هذه القدرة عن طريق إضافة السمات المقابلة.
لتسهيل عرض النتائج ، أضف حدث استجابة الماوس إلى العلامة. عندما ينتقل الماوس إلى العلامة المقابلة ، سيتم تشغيل الطريقة لطباعة القدرات التي يتمتع بها.
تحليل البرنامج
رمز جزء HTML كما يلي:
<viv> <superman> لا شيء! </superman> <Superman Strength> قوة! </superman> <superman قوة القوة> سرعة القوة! </superman> <superman قوة سرعة سرعة القوة!
دعونا نرى كيفية تنفيذها. أول شيء هو إنشاء وحدة نمطية:
var myappmodule = Angular.module ("myapp" ، []) ؛
على أساس هذه الوحدة ، قم بإنشاء علامة Superman ، على غرار المسار السابق.
myappmodule.directive ("superman" ، function () {return {scope: {} ، تقييد: 'ae' ، ترجمة: صواب ، القالب: "<viv> <div ng-transcled> </viv> </viv>" ، وحدة التحكم: الدالة ($ scope) {$ spic. $ scope.push ("القوة") ؛ console.log (Scope.Absions) ؛الفرق هنا هو أن هناك سمة وحدة تحكم داخل الطريقة. هذه ليست وحدة تحكم مثل NG-Controller ، ولكنها واجهة للتعليمات التي يجب فتحها في الخارج. يمكن استخدام الطرق المعلنة فيه خارجيًا كطرق عامة ، ويمكن للتعليمات الأخرى استخدام هذه الطرق من خلال التبعيات.
بعد ذلك ، قم بإنشاء ثلاثة أوامر مقابلة للقدرات
myappmodule.directive ("القوة" ، الدالة () {return {require: '^superman' ، link: function (scope ، element ، attr ، supermanctrl) {supermanctrl.addstrength () ؛}}}) ؛ myappmodule.directive ("speed" ، function () {return {require: '^superman' ، link: function (scope ، element ، attr ، supermanctrl) {supermanctrl.addspeed () ؛}}}) ؛ myappmodule.directive ("light" ، function () {return {require: '^superman' ، link: function (scope ، element ، attr ، supermanctrl) {supermanctrl.addlight () ؛}}}) ؛رموز الإرشادات الثلاثة هي نفسها تقريبًا ، حيث تتطلب تحديد التعليمات التابعة.
هناك معلمة إضافية supermanctrl في الرابط. يتم تخمين هذه المعلمة بأنها وحدة التحكم في سوبرمان ، وبالتالي فإن طريقة التسمية هي Superman+Ctrl.
[لأنني لا أفهم المبادئ الداخلية ، فهذا مجرد تخمين ، لكن التجارب أثبتت أنه إذا تم تغيير اسم هذه المعلمة ، فسيتم الإبلاغ عن خطأ. 】
بعد إعلان هذه التعليمات الثلاثة ، يمكنك استخدام هذه التعليمات الثلاثة كسمات فائقة. عند الإشارة إلى هذه السمة ، سيتم تشغيل الطريقة الداخلية داخل الرابط وسيتم استدعاء الأساليب التي يتم الكشف عنها في Superman.
لتلخيص ، العملية التفاعلية للتعليمات:
1 قم أولاً بإنشاء توجيه أساسي ، وبعد سمة وحدة التحكم ، أضف الطريقة التي تم الكشف عنها للجمهور.
2 قم بإنشاء تعليمات تفاعلية أخرى ، أضف تبعية التعليمات المقابلة بعد سمة المتطلبات ؛ استدعاء الطريقة المكشوفة في الرابط
جميع رموز البرنامج:
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <viv> <div> <supustman> nothing! </superman> </superman قوة القوة! > ضوء سرعة القوة! </superman> </viv> <script type = "text/javaScript"> var myappmodule = Angular.Module ("myapp" ، []) ؛ myappmodule.directive ("superman" ، function () {return {scope: {} ، تقييد: 'ae' ، ترجمة: صواب ، القالب: "<viv> <div ng-transcled> </viv> </viv>" ، وحدة التحكم: الدالة ($ scope) {$ spic. $ scope.push ("القوة") ؛ console.log (Scope.Absions) ؛ myappmodule.directive ("القوة" ، الدالة () {return {require: '^superman' ، link: function (scope ، element ، attr ، supermanctrl) {supermanctrl.addstrength () ؛}}}) ؛ myappmodule.directive ("speed" ، function () {return {require: '^superman' ، link: function (scope ، element ، attr ، supermanctrl) {supermanctrl.addspeed () ؛}}}) ؛ myappmodule.directive ("light" ، function () {return {require: '^superman' ، link: function (scope ، element ، attr ، supermanctrl) {supermanctrl.addlight () ؛}}}) ؛ </script> </body> </html>نتائج التشغيل:
ما سبق هو المعلومات حول تفاعل تعليمات AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!