AngularJS Directives

AngularJS bai aiki ba da aiki na yin 'harsasaudaga na 'new' aiki dona aiki da HTML.

AngularJS ena kofar harsasau da ke da ke aiki za aiki za shirin da ke kama aiki da aiki na shirin.

AngularJS 还允许您定义自己的指令。

AngularJS Directives

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-.

ng-app 指令初始化 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model تقييد قيمة عنصر التحكم HTML (مثل input، select، textarea) إلى البيانات التطبيقية.

请在我们的 AngularJS 指令参考中阅读有关所有 AngularJS 指令的信息。

instance

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

Try it yourself

ng-app 指令还告诉 AngularJS，<div> 元素是 AngularJS 应用程序的“所有者”。

数据绑定

上例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定将 AngularJS 表达式与 AngularJS 数据进行绑定。

{{ firstName }} 与 ng-model="firstName" 绑定在一起。

在下一个例子中，两个文本字段通过两个 ng-model 指令绑定在一起：

instance

<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

Try it yourself

使用 ng-init 并不常见。你将在关于控制器的章节中学习如何初始化数据。

重复 HTML 元素

ng-repeat 指令重复 HTML 元素：

instance

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Try it yourself

ng-repeat 指令实际上为集合中的每个项目克隆一次 HTML 元素.

用于对象数组的 ng-repeat 指令：

instance

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Try it yourself

AngularJS مثالي جدًا للعناصر CRUD (إنشاء، قراءة، تحديث، حذف) التطبيقات.

تخيل أن هذه الأجسام تأتي من سجلات قاعدة بيانات.

تعليمات ng-app

ng-app تعريف تطبيق AngularJSالعنصر الجذر.

عند تحميل الصفحة،ng-app تعليماتتأهيل تلقائيتطبيق (تأهيل تلقائي).

تعليمات ng-init

ng-init تعريف تطبيق AngularJSالقيمة الافتراضية.

عادةً، لن تستخدم ng-init. ستحل محلها التحكم أو المكتبة.

ستعلم المزيد عن التحكمات والمكتبات لاحقًا.

تعليمات ng-model

ng-model تقييد قيمة عنصر التحكم HTML (مثل input، select، textarea) إلى البيانات التطبيقية.

ng-model يمكن للتعليمات أيضًا:

  • توفير التحقق من نوع البيانات (رقم، بريد إلكتروني، إلزامي)
  • توفير حالة البيانات التطبيقية (غير صالح، قذر، لم يلمس، خطأ)
  • توفير فئة CSS لعنصر HTML.
  • ربط عنصر HTML بنموذج HTML.

اقرأ المزيد عن ng-model معلومات التعليمات.

إنشاء تعليمات جديدة

إضافة إلى جميع التعليمات المدمجة في AngularJS، يمكنك إنشاء تعليمات خاصة بك.

تُستخدم التعليمات الجديدة من خلال .directive من قبل الدالة.

لإرسال تعليمات جديدة، قم بإنشاء عنصر HTML يحمل نفس اسم العلامة المميزة لتلك التعليمات.

عند تسمية التعليمات يجب استخدام التسمية بالحروف الكبيرة المتتابعة،w3TestDirective، لكن يجب استخدام حرف الفاصلة المنقوطة لتمييز الاسم عند الت 호출،w3-test-directive:

instance

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  });
});
</script>
</body>

Try it yourself

يمكنك طلب التعليمات التالية:

  • اسم العنصر
  • الصفات
  • الفئة
  • التعليق

كل الأمثلة التالية ستنتج نفس النتيجة:

اسم العنصر

<w3-test-directive></w3-test-directive>

Try it yourself

الصفات

<div w3-test-directive></div>

Try it yourself

الفئة

<div class="w3-test-directive"></div>

Try it yourself

التعليق

<!-- directive: w3-test-directive -->

Try it yourself

limit

You can limit your directive to be called only through certain methods.

instance

by adding a value of "A" of restrict attribute, the directive can only be called through attributes:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

Try it yourself

Legal restrict values are:

  • E represents element name
  • A represents attribute
  • C represents class
  • M represents comment

By default, the value is EA, wa ta ce da yinshi ma'anarshi wanda ke iya aiki aya, ana wakilci na sunan abin da ke da yawa.