تفسير AngularJS التعليمات والنصائح والمثال على رمز البرمجة

　　مقدمة في الخلفية

　　هذا المثال هو مثال في الفيديو، هناك动感超人، لديه ثلاثة قدرات، قوة strength، سرعة speed، إضاءة light.

　　هذه القدرات الثلاث كخصائص، يتم تعريف动感超人 كعلامة، يمكنك الحصول على هذه القدرة فقط بإضافة الخاصية المطلوبة.

　　لراحه عرض النتائج، قم بإضافة استجابة للفأرة للعلامة، حيث يتم تنفيذ طريقة عند تحريك الفأرة إلى العلامة المحددة، ويتم طباعة القدرة المتاحة.

　　تحليل البرنامج
　　كود الجزء html كالتالي:　　　　　　　

 <div>
      <superman>لا شيء!</superman>
      <superman strength >قوة!</superman>
      <superman strength speed >قوة سرعة!</superman>
      <superman strength speed light >قوة سرعة ضوء!</superman>
    </div>

　　دعنا نرى كيف يمكن تحقيق ذلك، أولاً ما زلنا نخلق مoduleًا:

var myAppModule = angular.module("myApp",[]);

　　على أساس هذا المodule، قم بإنشاء علامة superman، مثلما كان الحال من قبل.

myAppModule.directive("superman",function(){}
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          controller:function($scope){}
            $scope.abilities = [];
            this.addStrength = function(){}
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){}
              $scope.abilities.push("speed");
            };
            this.addLight = function(){}
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });

　　هنا يختلف الأمر، حيث أن هناك خاصية controller داخل الطريقة، وليس هذا ng-controller مثل هذا التحكم، بل هو واجهة مفتوحة للتعليمات، حيث يمكن استخدام الطرق المعلن عنها كطرق عامة في الخارج، يمكن للتعليمات الأخرى استخدام هذه الطرق من خلال الاعتماد.

　　ثم قم بإنشاء تعليمات لثلاثة قدرات.

    myAppModule.directive("strength",function(){
        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();
          }
        }
      });

　　كود هذه التعليمات الثلاثة يشبه بعضه البعض، حيث أن require يحدد التعليمات التي تعتمد.

　　لقد أضيفت إلى link معامل جديد يُعتقد أن هذا المعامل هو controller في superman، لذا تم تسميته بطريقة superman + Ctrl.

　　【بسبب عدم فهم المبادئ الداخلية، هذا مجرد تخمين، ولكن أثبتت التجربة أن تغيير اسم هذا المعامل سيتسبب في خطأ.]

　　إعلان هذه التعليمات الثلاثة، يمكنك استخدام هذه التعليمات كخصائص super، وعند تحديد الخصائص، يتم تنفيذ طريقة الداخل link، وتشغيل الطرق العامة في superman.　　

　　بشكل مختصر، عملية التفاعل للتعليمات:}

　　1 إنشاء تعليمات أساسية أولاً، في سمة controller، أضف الطرق العامة المفتوحة

　　2 إنشاء تعليمات أخرى للتفاعل، في سمة require، أضف علاقات الاعتماد الخاصة بالتعليمات؛ في سمة link، استدعاء الطرق العامة

　　كود البرنامج الكامل:

<!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>
    <div>
      <superman>لا شيء!</superman>
      <superman strength >قوة!</superman>
      <superman strength speed >قوة سرعة!</superman>
      <superman strength speed light >قوة سرعة ضوء!</superman>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.directive("superman",function(){}
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          controller:function($scope){}
            $scope.abilities = [];
            this.addStrength = function(){}
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){}
              $scope.abilities.push("speed");
            };
            this.addLight = function(){}
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });
      myAppModule.directive("strength",function(){
        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، وسنستمر في إضافة المعلومات ذات الصلة لاحقًا، شكرًا لكم على دعمكم لهذا الموقع!

بيان: محتويات هذا المقال تم جمعها من الإنترنت، وتنتمي لصاحب الحقوق الأصلي، وقد تم توفيرها من قبل مستخدمي الإنترنت بشكل متعاوني وتحميلها بشكل مستقل، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا اكتشفتم محتوى يشتبه في انتهاك حقوق النسخ، الرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') للإبلاغ، وتقديم الدليل ذات الصلة، وسيتم حذف المحتوى المزعوم فور التحقق منه.

تعليمية الأساس

تحب أن تقرأ