النقاط الرئيسية للتعلم
• لماذا تستخدم الأوامر
• إنشاء توجيهات مخصصة
• العمل مع jqlite
1. لماذا استخدام الأوامر المخصصة
لدى NG العديد من التوجيهات المخصصة المدمجة ، لكنها في بعض الأحيان لا تفي بمتطلباتك ، مما يتطلب منا إنشاء خصائص مخصصة.
2. الأوامر المخصصة
بعد ذلك ، دعنا نفعل حالة صغيرة. عندما ينقر الماوس لزيادة السعر ، ستزداد عناصر القائمة تلقائيًا. بالطبع ، تتم إضافة القائمة أيضًا تلقائيًا من خلال التعليمات. إنه Div فارغ
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "examplep"> <head> <title> اختبار Angluar </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv ng-controller = "defaultCtrl قم بزيادة </button> </div> <viv> <!-عرض بيانات المنتجات في قائمة غير مرتبة-> <!-قائمة-property = "Price | Currency" وحدات عنصر القائمة المترجمة-> <div unorderlist = "products" list-property = "price | currency"> </viv> </div> </dlv> type type = "text/javaScript". src = "js/angular.min.js"> </script> <script type = "text/javaScript"> angular.module ("examplep" ، []). ATTRS ["UnorderList" احصل على قيمة UnorderList ، فيما يلي منتجات من نموذج البيانات element.append (ul) ؛ <li> عنصر العلامة var li = angular.element ("<li>") (NewValue ، oldvalue) {// تحديث قيمة li li.text (newValue) ؛ Expiry: 10} ، {name: "Bananas" ، "Fruit" ، Price: 2.42 ، Expiry: 7} ، {name: $ scope.products [i] .price ++ ؛تحليل:
الخطوة 1: قم بإنشاء وحدة تحكم ، وإضافة منتجات نموذج البيانات وطريقة الزيادة ()
الخطوة 2: تخصيص علامة UnorderList. وظيفة هذه العلامة هي: عرض قيمتها في قائمة غير مرتبة من خلال نموذج البيانات المنتشر.
الجزء 3: وعندما يتم النقر على زر الترميز ، ستزداد قيم القائمة غير المرتبة في التسلسل
3. العمل مع jqlite
NG لديه JQlite مدمج ، وهو نسخة أصغر من jQuery
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "examplep"> <head> <title> اختبار Angluar </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv> <!-استخدم التوجيه المخصص-> <ol dominive-dilective> <li> التفاح </li> <ul> <li> الموز </li> </li> <li> Oranges </li> </ol> </dlv> <script type = "text/javaScript" src = "js/Angular.min.js"> </script> <script type = "text/javaScript"> Angular.Module ("exampleap" ، []) .diroctive ( // ابحث عن جميع العناصر التي تُعرف عن العناصر ، هنا هو العناصر المتقنة = element. (items.eq (i) .Text () == "Oranges") {items.eq (i) items.css ("اللون") ؛تحليل:
الخطوة 1: تخصيص وحدة التحكم وتحديد أسماء نموذج البيانات
الخطوة 2: تخصيص الأمر ، تتمثل الوظيفة في معرفة جميع LIS تحت العناصر المستخدمة من قبل الأمر ، وتعيين قيم مختلفة لألوان مختلفة للخط.
الخطوة 3: اتصل واستخدم التعليمات في العرض
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.