اندازهی قلم متن
تخمین مدت زمان مطالعهی مطلب:
سه دقیقه
در پست قبلی با کلیات مفاهیم دیرکتیوها آشنا شدید. در این پست قصد داریم برخی توابع کنترلرهای تعریف شده در Angular را به وسیله دیرکتیوهای تعریف شده در ماژول فراخوانی نماییم. در ادامه این موضوع را طی یک مثال بررسی خواهیم کرد.
ابتدا View مورد نظر را به صور زیر ایجاد میکنیم:
ابتدا View مورد نظر را به صور زیر ایجاد میکنیم:
<script type="text/javascript" src="~/scripts/Modules/module4.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <span enter>Load More Books</span> </div> </div>
برنامه به این صورت است که با ورود نشانگر ماوس بر روی تگ span (فراخوانی رویداد mouseenter برای تگ هایی که دارای دیرکتیو enter باشند) یک تابع به نام loadMoreBook در کنترلر myCtrl فراخوانی میشود.
بک فایل جاوااسکریپتی به نام myModule بسازید و ماژول مورد نظر را ایجاد نمایید:
بک فایل جاوااسکریپتی به نام myModule بسازید و ماژول مورد نظر را ایجاد نمایید:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) { $scope.loadMoreBook = function () { alert('Loading Books...'); } });
app.directive('enter', function () { return function (scope, element) { element.bind('mouseenter', function () { scope.loadMoreBook(); }) } });
اولین نکته این است که به در تابع سازنده دیرکتیو به جای برگشت آبجک مورد نظر یک تابع برگشت داه میشود. برای اینکه بتوان به توابع کنترلر محصور کننده دیرکتیو دسترسی داشت آرگومان اول تابع معادل scope مورد استفاده در کنترلر خواهد بود. آرگومان دوم معادل المانی است که دارای دیرکتیو enter است. در این تابع ابتدا برای رویداد mouseenter رویدادگردان آن پیاده سازی شده است که در آن تابع loadMoreBook کنترلر مورد نظر فراخوانی میشود.
خروجی
خروجی
حال فرض بر این است که در کنترلر بالا تابع دیگری به نام loadMoreAuthor برای فراخوانی نویسندگان نیز وجود دارد. به صورت زیر:
app.controller('myCtrl', function ($scope) { $scope.loadMoreBook = function () { alert('Loading Books...'); } $scope.loadMoreAuthor = function () { alert('Loading Authors...'); } });
<script type="text/javascript" src="~/scripts/Modules/module4.js"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <span enter="loadMoreBook()">Load More Book</span> <hr> <span enter="loadMoreAuthor()">Load More Author</span> </div> </div>
app.directive('enter', function () { return function (scope, element , attrs) { element.bind('mouseenter', function () { scope.$apply(attrs.enter); }) } });
در کدهای بالا، برای اینکه بتوان بر اساس نام یک تابع آن را فراخوانی کرد، از سرویس apply$ که به صورت توکار در angular تعبیه شده است استفاده کردم. برای به دست آوردن نام تابع، باید از آرگومان سوم تابع (attrs) به همراه نام دیرکتیو استفاده کرد. به دلیل اینکه نام دیرکتیو enter است باید پارامتر سرویس apply$ به صورت attrs.enter باشد. خروجی نیز مانند حالت قبل خواهد بود.