در مطلب آشنایی با Directiveها در AngularJSبا نحوه‌ی ایجاد Directiveآشنا شدیم. هدف از این مطلب، آشنایی بیشتر با Directiveدر AngularJSاست؛ یکی از بهترین فریم ورک‌های جاوااسکریپتی،باقابلیت ایجاد کتابخانه‌هایی از کامپوننتها که می‌توانند به HTMLاضافه شوند.
کتابخانه‌های جاوااسکریپتی زیادی وجود دارند. به عنوان مثال Bootstrapیکی از محبوب‌ترین "front-end
framework"ها است که امکان تغییر در ظاهر المنت‌ها را فراهم می‌کند و شامل
تعدادی کامپوننت جاوااسکریپتی نیز می‌باشد. مشکل کار، در هنگام استفاده از کامپوننتها است. شخصی که در حال توسعه‌ی HTMLاست
باید در کدجاوااسکریپتی خود از jQueryاستفاده کند و بعنوان مثال یک Popover را فعال یا غیر فعال کند و این، یک فرآیند خسته کننده و مستعد خطا
است.
یک مثال ساده از DirectivesAngularJSو بررسی آن
var m = angular.module("myApp");
myApp.directive("myDir", function() { return {
restrict: "E",
scope: {
name: "@",
amount: "=",
save: "&"
},
template:
"<div>" +
" {{name}}: <input ng-model='amount' />" +
" <button ng-click='save()'>Save</button>" +
"</div>",
replace: true,
transclude: false,
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});به الگوی نامگذاری directiveدقت کنید. پیشوند myشبیه به یک namespaceاست. بنابراین اگر یک Applicationاز دایرکتیوهای قرار گرفته در Moduleهای متفاوت استفاده کند، به راحتی می‌توان محل تعریف یک directiveرا تشخیص داد. این نام می‌تواند نشان دهنده‌ی این باشد که این directiveرا خودتان توسعه داده‌اید یا از یک directiveتوسعه داده شده توسط شخص دیگری در حال استفاده هستید. به هر حال این نحوه‌ی نام گذاری یک اجبار نیست و به عنوان یک پیشنهاد است.
سازنده directiveیک شیء را با تعدادی خاصیت باز می‌گرداند که تمامی آنها در سایت AngularJSتوضیح داده شده‌اند. در اینجا قصد داریم تا توضیحی مختصر در مورد کاری که این خصوصیات انجام می‌دهند داشته باشیم.
· restrict:تشخیص می‌دهد که آیا directiveدر HTMLاستفاده خواهد شد. گزینه‌های قابل استفاده ‘A’، ‘E’، ‘C’برای attribute، element، classو یا commentاست. پیش فرض ‘A’برای attributeاست. اما ما بیشتر علاقه به استفاده از ویژگی elementبرای ایجاد المنت‌های UIداریم.
· scope:ایجاد یک scopeایزوله که متعلق به directiveاست و موجب ایزوله شدن آن از scopeصدا زننده directiveمی‌شود. متغیرهای scopeپدر از طریق خصوصیات تگ directiveارسال می‌شوند. این ایزوله کردن زمانی کاربردی است که در حال ایجاد کامپوننت هایی با قابلیت استفاده مجدد هستیم، که نباید متکی به scopeپدر باشند. شیء scopeدر directiveنام و نوع متغیرهای scopeرا تعیین می‌کنند. در مثال بالا سه متغیر برای scopeتعریف شده است:
- name: "@" (by value, one-way):علامت @مشخص می‌کند که مقدار متغیر ارسال می‌شود. Directiveیک رشته را دریافت می‌کند که شامل مقدار ارسال شده از scopeپدر می‌باشد. Directiveمی‌تواند از آن استفاده کند، اما نمی‌تواند مقدار آن را در scopeپدر تغییر دهد.
- amount: "=" (by reference, two-way) :علامت = مشخص می‌کند این متغیر با ارجاع ارسال می‌شود. Directiveیک ارجاع به مقدار متغیر در scopeاصلی دریافت می‌کند. مقدار می‌تواند هر نوع داده ای، شامل یک شیء complexیا یک آرایه باشد. Directiveمی‌تواند مقدار را در scopeپدر تغییر دهد. این نوع متغیر، زمانیکه نیاز باشد directiveمقدار را در scopeپدر تغییر دهد، استفاده می‌شود.
- save: "&" (expression) : علامت &مشخص می‌کند این متغیر یک expressionرا که در scopeپدر اجرا می‌شود، نگهداری می‌کند. اکنون directiveقابلیت انجام کارهایی فراتر از تغییر یک مقدار را دارد. به عنوان مثال می‌توان یک تابع را از scopeپدر فراخوانی و نتیجه‌ی اجرا را دریافت کرد.
· template : الگوی رشته ای که جایگزین المنت تعریف شده می‌شود. فرآیند جایگزینی تمامی خصوصیات را از المنت قدیمی به المنت جدید انتقال می‌دهد. به نحوه استفاده از متغیرهای تعریف شده در scopeایزوله دقت کنید. این مورد به شما امکان تعریف directiveهای macro-styleرا می‌دهد که نیاز به کد اضافه‌ای، ندارند. اگرچه در بیشتر موارد الگو یک تگ ساده <div> است که از کد‌های linkکه در زیر توضیح داده شده است استفاده می‌کند.
· replace:تعیین می‌کند که آیا الگوی directiveباید جایگزین المنت شود. مقدار پیش فرض falseاست.
· transclude: تعیین کننده این است که محتوای directiveباید در المنت کپی شود یا خیر. در مثال زیر المنت tabشامل المنت‌های HTMLدیگر است پس transcludeبرابر trueاست.
<body ng-app="components"> <h3>BootStrap Tab Component</h3> <tabs> <pane title="First Tab"> <div>This is the content of the first tab.</div> </pane> <pane title="Second Tab"> <div>This is the content of the second tab.</div> </pane> </tabs></body>
· link: این تابع بیشتر منطق directiveرا شامل می‌شود. Linkوظیفه دستکاری DOM، ایجاد event listenerها و... را دارد. تابع Linkپارامترهای زیر را دریافت می‌کند:
- scope :ارجاع به scopeایزوله شده directiveدارد.
- element: ارجاع به المنت‌های DOM که directive را تعریف کرده اند. تابع linkمعمولا برای دستکاری المنت از jQueryاستفاده می‌کند. (یا از Angular'sjqLiteدر صورتی که jQueryبارگذاری نشده باشد)
- controller: در مواقعی که از دایرکتیوهای تو در تو استفاده می‌شود کاربرد دارد. این پارامتر یک directiveفرزند با ارجاعی به پدر را فراهم می‌کند، بنابراین موجب ارتباط directiveها می‌شود.
به عنوان مثال، این directive که پیاده سازی bootstrap tabرا انجام داده است، می‌توانید مشاهده نمایید.
موفق باشید