اگر مطالعه ای اجمالی درباره مزیتها و قدرتهای فریم ورک Angular داشته باشید یکی از مواردی که بسیار جلب توجه میکند مبحث Directiveها است. به کمک Directiveها در Angular میتوانید کدهای HTML خود را توسعه دهید. این توسعه علاوه بر تعریف تگهای جدید، شامل توسعه کلاسها و همچنین ویژگیهای تگهای HTML نیز خواهد بود. کدهای HTML شما بسیار خواناتر و از طرفی با قابلیت استفاده مجدد میشود. البته این پست فقط شروع به کار در این مقوله است زیرا مبحث Directiveها بسیار گستردهتر از آن است که بتوان مطالب آن را در یک مقاله گنجاند.
برای شروع یک فایل جاوا اسکریپ ایجاد کرده و در ابتدای آن یک ماژول تعریف کنید:
var app = angular.module('myApp', []);
در این جا نام ماژول را myApp انتخاب کردم. حال یک Directive به نام angry (نام دیرکتیوها را با حروف کوچک آغاز کنید
)به صورت زیر ایجاد میکنیم:
app.directive('angry', function () {
return {
restrict: 'E',
template: '<div style="color:red"> I am angry!</div>'
}
})
تابع سازنده Directive مورد نظر که یک آبجکت را برگشت میدهد شامل خواص زیر میباشد:
restrict: که چهار مقدار E و A و C و M را میپذیرد که به EACM نیز معروف هستند.
E: زمانی که قصد داشته باشیم یک المان جدید بسازیم از E به معنای element در restrict استفاده میکنیم(<my-directive></my-directive> )؛
A: زمانی که قصد داشته باشیم Directive مورد نظر به عنوان Attribute در تگها استفاده شود از A به معنای Attribute در restrict استفاده میشود(<div my-directive="exp"></div> )؛
C: از C نیز برای تعریف Directive به عنوان مقادیر ویژگی کلاس استفاده میکنیم(<div class="my-directive: exp "></div> )؛
M: حالت M نیز برای استفاده Directive در کامنتها است(<!-- directive: my-directive exp --> ).
در ادامه یک Directive دیگر به نام happy میسازیم:
app.directive('happy', function () {
return {
restrict: 'A',
template: '<div style="color:blue"> I am happy!</div>'
};
})
تفاوت اصلی بین این دو Directive در نوع restrict آنها میباشد. برای استفاده از این Directiveها در View میتوان به صورت زیر عمل نمود:
<script type="text/javascript" src="~/scripts/Modules/module1.js"></script>
<div ng-app="myApp">
<angry></angry>
<div happy></div>
</div>
همان طور که میبینید دستور Directive اول که را با restrict از نوع E است میتوان به عنوان یک تگ جدید استفاده کرد. دستور happy به عنوان ویژگی تگ div مورد استفاده قرار میگیرد(به دلیل اینکه restrict آن از نوع A است) که در نهایت خروجی ساده مثال بالا به صورت زیر خواهد بود:
ادامه دارد...