دوشنبه , خرداد ۷ ۱۳۹۷
خانه / مقالات / برنامه نویسی / web developer / Front End / ایجاد Directive سفارشی در انگولار 1
AngularJS Directives

ایجاد Directive سفارشی در انگولار 1

در این مقاله قصد داریم به صورت مختصر با ایجاد Directive سفارشی در انگولار آشنا بشیم.

directive ها در Angular JS ، همان attribute های المان های HTML هستند که Angular JS به ما اجازه می دهد آن ها را توسعه بدهیم . Angular JS  بسیاری از directive  ها را به صورت تعبیه در هسته خود دارد برای آشنایی با دایرکتیو های اصلی انگولا به مقاله AngularJS Directives مراجعه کنید.

نحوه تعریف دایرکتیو در انگولار با تمامی اجزاء که هر قسمت را در ادامه توضیح خواهیم داد.

angularModuleName.directive('directiveName', function() {  
    return {  
        restrict: String,  
        priority: Number,  
        terminal: Boolean,  
        template: String or Template Function,  
        templateUrl: String,  
        replace: Boolean or String,  
        scope: Boolean or Object,  
        transclude: Boolean,  
        controller: String or  
            function(scope, element, attrs, transclude, otherInjectables) { ... },  
        controllerAs: String,  
        require: String,  
        link: function(scope, iElement, iAttrs) { ... },  
        compile: return an Object OR  
            function(tElement, tAttrs, transclude) {  
                return {  
                    pre: function(scope, iElement, iAttrs, controller) { ... },  
                    post: function(scope, iElement, iAttrs, controller) { ... }  
                }  
                // or  
                return function postLink(...) { ... }  
            }  
      };  
});

Restrict (محدودیت) :

این ویژگی برای مشخص کردن نحوه استفاده دایرکتیو در DOM استفاده می شود. یک directive می تواند به عنوان یک صفت (A) ، یک المان (E) ، یک کلاس(C) و یا یک کامنت (M)  باشد. این موارد می تواند به تنهایی یا همگی با هم مورد استفاده قرار بگیرند. مقدار دهی به این موارد دلخواه است، به این معنی که اگر برای آن ها مقداری انتخاب نکنید، مقادیر پیش فرض در آن ها قرار خواهند گرفت. مقادری پیش فرض Restrict در واقع EA است به معنای المنت و Attribute است

app.directive("MyDirective", function() {
    return {
        restrict : "E", // <MyDirective></MyDirective>
        restrict : "A", // <div MyDirective></div>
        restrict : "C", // <div class="MyDirective"></div>
        restrict : "M", // <!-- directive: MyDirective -->
        template : "<h1>Made by a directive!</h1>"
    };
});

Priority  (اولویت) :

ترتیب فراخوانی ها Directive ها در Angular را مشخص می کند. دایرکتیوی که بیشترین اولویت را داشته باشد، سریع تر از بقیه دایرکتیو ها اجرا خواهد شد. مقدار پیش فرض این مورد، 0 می باشد. این ترتیب فراخوانی بستگی به false بودن ویژگی terminal دارد اگر terminal  با true مقدار دهی شده باشد دایرکتیو با الویت پایین تر از دایرکتیو جاری اجرا نخواهد شد.

Template (قالب) :

قالب Inline HTML مربوط به دایرکتیو را مشخص می کند.

TemplateURL (آدرس دهی قالب) :

شما همچنین می توانید قالب directive را بارگذاری کنید، با استفاده از یک URL که شامل کدهای قالب باشد.

Replace (جایگزینی):

مقدار این مورد می تواند True و یا False  باشد. اگر این مقدار True  باشد، قالب به المان والد اضافه می شود.

Scope (قلمرو):

این مورد، قلمرو directive را مشخص می کند و یک گزینه بسیار مهم محسوب می شود، که باید با دقت و متناسب با نیاز دایرکتیو مشخص شود. سه راه برای مقدار دهی به این دایرکتیو وجود دارد:

1-قلمرو مشخص شده در DOM برای دایرکیتو : اگر scope  برابر با False باشد، مقدار پیش فرض چه خواهد بود؟ قلمرو دایرکتیو همان قلمرو المان DOM خواهد بود.

2-یک قلمرو جدید که از قلمرو Controller داخلی ارث بری می کند. اگر scope  بر روی true تنظیم شده باشد، یک قلمرو جدید برای دایرکتیو ایجاد می شود، که از همه Property  های المان والد ارث بری می کند.

3-به عنوان یک قلمرو ایزوله ، هیچ چیزی از والد به ارث نخواهد برد. این نوع از قلمرو برای ساخت کامپوننت های قابل استفاده مجدد به کار می رود.

اگر قلمرو بر روی {} تنظیم شده باشد، یک قلمرو ایزوله برای دایرکتیو ایجاد می شود که به این معنی است که دایرکتیو به متغیر ها / داده های قلمرو والد دسترسی ندارد. این ویژگی می تواند بسیار مفید باشد، به این خاطر که می توانید یک کامپوننت قابل استفاده مجدد ایجاد کنید. اما در اغلب مواردبه یک ارتباط میان دایرکتیو و قلمرو والد احتیاج داریم و همچنین نمی خواهیم که دایرکتیو به قلمرو والد خودش دسترسی داشته باشد. بنابراین یک قلمرو ایزوله ، تعدادی فیلتر برای تبادل داده بین قلمرو والد و شی قلمرو جدید ایجاد می کند. برای این که داده ها از قلمرو والد بتوانند به قلمرو دایرکتیو بروند، ما نیاز داریم تعدادی property تعریف کنیم تا بعدا آن ها را به قلمرو بفرستیم.

scope: {  
varibaleName1:'@attrName1',  
varibaleName2:'=attrName2',  
varibaleName3:'&attrName3' 
}  

scope: {  
attrName1:'@',  
attrName2:'=',  
attrName3:'&' 
}

در قلمرو ایزوله، سه راه ارتباطی بین والد و دایرکتیو وجود دارد:

@Text binding و یا اتصال یک طرفه و یا دسترسی فقط خواندنی. این مورد یک ارتباط یک طرفه بین والد و دایرکتیو است.

= Model bindin و یا ارتباط دو طرفه. این مورد مقدار صفت را به عنوان یک نام مدل می شناسد و می پذیرد. تغییرات در این روش به صورت همزمان انجام می شوند.

& Method binding و یا ارتباط رفتاری ، برای اتصال متدها از قلمرو والد به قلمرو دایرکتیو استفاده می شود. بنابراین این امکان را به ما می دهد تا فراخوانی ها را در قلمرو والد اجرا کنیم.

Transclude (انتقال/نگهداری/رسانایی):

دایرکتیو می تواند به محتویات / قالب المان والد خودش اضافه شود و یا با آن جایگزین شود. با گزینه ی Transclude ، اگر مقدار آن بر روی True باشد، شما می توانید محتویات اصلی را درون قالب دایرکتیو نگهداری کنید.

Controller :

شما می توانید نام کنترلر و یا تابع کنترلر را مشخص کنید که بعدا در درون دایرکتیو از آن استفاده کنید.

ControllerAs :

با استفاده از این گزینه، یک نام جایگزین می تواند برای کنترلر مشخص شود .

Require :

این گزینه، نام سایر دایرکتیو هایی که می خواهیم از آن ها استفاده کنیم را در بر می گیرد. اگر یکی از دایرکتیو های شما به دایرکتیو دیگری وابسته باشذ، شما می توانید نام آن را در این قسمت مشخص کنید.

Link :

این گزینه، برای تعریف یک تابع استفاده می شود، که می تواند برای تعریف و ویرایش نمونه های شی های درون DOM استفاده شود. برخی از این موارد عبارتند از : اضافه کردن event listener ها و یا تنظیم data binding ها.

ngCustomDirectivesApp.directive('likeButton', function () {  
    return {  
        restrict: 'EA',  
        templateUrl: '../partials/likebutton.html',  
        replace: true,  
        link: function (scope, element, attrs) {  
            element.bind('click', function () {  
                element.toggleClass('like');  
            })  
        }  
    }  
})

ببینید که  Link function سه پارامتر دارد که اولی، تعیین کننده محدوده قلمرو دایرکتیو است. دومی ، پارامتری است که المان های قابل دسترسی را برای ما مشخص می کند. این گفته به این معنا است که در این مثال ما به دکمه به عنوان یک المان دسترسی پیدا کرده ایم. سومین پارامتر ، صفت دایرکتیو می باشد. در link function ما به رویداد کلیک دکمه دسترسی پیدا کرده ایم.

Compile :

با استفاده از این مورد، شما می توانید یک تابع تعریف کنید که قالب المان های DOM را با آن ویرایش کنید. این گزینه همچنین می تواند برای بازگرداندن یک link function  برای ویرایش نمونه های المان ها مورد استفاده قرار بگیرد.

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.