ورود

ورود کاربر

0%

ساخت دایرکتیودر Angular

دایرکتیو نشانه ای است که بر روی Dom مانند attribute،تگ،کامنت و کلاس سی اس اس ایجاد میشوند که یک سری ویژگی ها رو از طریق کامپایلر اچ تی ام ال انگیولر به Dom میدهد .

مثلا ng-app که یک دایرکتیو است برای شروع کار با انگیولر به اون احتیاج داریم یا از طریق ng-controller می تونیم در یک قسمت از اچ تی ام ال کار خاصی انجام بدهیم . اگر بخواهیم دایرکتیو سفارشی بسازیم ، قبل از اون احتیاج است که این موارد رو بدونیم .

دایرکتیو ها به 4 صورت می باشد :

  • تگ (Element directives)
  • صفات (Attribute directives)
  • کلاس سی اس اس (CSS class directives)
  • کامنت (Comment directives)

 

در این فسمت می خواهیم دایرکتیوی بسازیم که با گذاشتن اون attribute در تگ های اچ تی ام ال بعد از Hover شدن یک کلاس به اون تگ اضافه بشه .

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

لینک اول ، لینک دوم ، لینک سوم

 

نمونه کد دایرکتیو : 

 

app.directive('hoverClass', function () {
    return {
        restrict: 'A',
        scope: {
            hoverClass: '@'
        },
        link: function (scope, element) {
            element.on('mouseenter', function() {
                element.addClass(scope.hoverClass);
            });
            element.on('mouseleave', function() {
                element.removeClass(scope.hoverClass);
            });
        }
    };
});

 

 

نمونه کد اچ تی ام ال :

<div class="italic" hover-class="red" >

در این قسمت چند نکته می باشد .

app.directive('hoverClass', function () {});

app : اسم ماژول می باشد 

restrict: 'A': A مخفف Attribute می باشد .

به طور مثال اگر خواستیم از Element استفاده کنیم به این صورت می نویسیم . restrict: 'E'

در قسمت اچ تی ام ال میتونیم hoverClass رو بزاریم و به اون کلاس مورد نظر رو بدهیم .

 

لینک دمو در پایین صفحه میزارم ومیتونید با inspect کردن متوجه اضافه شدن کلاس بشید .

نمونه کد - دمو

 

 

افزودن دیدگاه جدید