دایرکتیوها (Directives)
در AngularJS «دایرکتیو (Directive)» یعنی دستورهای افزایشی برای HTML. این دستورها با پیشوند ng- می آیند. آن ها رفتار می دهند و داده را وصل می کنند. مثل برچسب های راهنما روی دفتر مشق.
دایرکتیوهای پایه: ng-app ،ng-init ،ng-model
ng-app برنامه را شروع می کند. ng-init مقدار اولیه می دهد. ng-model ورودی را به داده وصل می کند.
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
بایندینگ داده (Data Binding)
«بایندینگ (Binding)» یعنی وصل کردن نمایش و داده. عبارت {{ firstName }} با ng-model هماهنگ می ماند.
<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>
تکرار عناصر با ng-repeat
ng-repeat یک عنصر را برای هر آیتم لیست کپی می کند. مثل فهرست حضور و غیاب.
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
می توان روی آرایه ای از آبجکت ها هم تکرار کرد. هر بار نام و کشور نمایش می یابد.
<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>
ساخت دایرکتیو دلخواه
با .directive می توان دایرکتیو جدید ساخت. نام تعریف شترمرغی است؛ فراخوانی با خط تیره.
<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>
روش های فراخوانی دایرکتیو
دایرکتیو می تواند با «عنصر»، «ویژگی»، «کلاس» یا «نظر» فراخوانی شود.
<w3-test-directive></w3-test-directive>
<div w3-test-directive></div>
<div class="w3-test-directive"></div>
<!-- directive: w3-test-directive -->
محدودیت ها با restrict
با گزینه restrict تعیین کن دایرکتیو چگونه فراخوانی شود. مقدارهای مجاز: E ،A ،C ،M.
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict: "A",
template: "<h1>Made by a directive!</h1>"
};
});
گام های عملی
- صفحه را با
ng-appشروع کن. - ورودی را با
ng-modelوصل کن. - لیست را با
ng-repeatتکرار کن. - دایرکتیو دلخواه را با
.directiveبساز.
نکته: استفاده زیاد از ng-init معمول نیست. مقداردهی را در کنترلر انجام بده. برای ادامه، به مدل و ng-model برو. سپس بخش ماژول ها را مرور کن.
جمع بندی سریع
- دایرکتیوها HTML را قوی تر می کنند.
- ng-model داده و نمایش را همگام می کند.
- ng-repeat برای لیست ها عالی است.
- restrict نوع فراخوانی را محدود می کند.