תחי ישראל -אין לנו ארץ אחרת

האזנה ותגובה לארועים ב- AngularJS

מחבר:

בתאריך: 25.02.2016

אחרי שבמדריך קודם טיפלנו ב- directives של AngularJS ממש על קצה המזלג, במדריך זה נלמד להשתמש ב-directives שמאזינים לאירועים. שימוש ב-directive של אירועים מאפשר לנו לכתוב קוד שמגיב לאירועים שונים. לדוגמה, קוד שעושה משהו בתגובה להקלקה על כפתור או בתגובה ליציאה משדה בטופס.

אירועים אנגולריים

ניתן לחבר מאזין לאירוע לאלמנט הטמ"ל על ידי שימוש באחד ה-directives. לדוגמה:

directive	למה הוא משמש?
ng-click	כשמקליקים על אלמנט
ng-dblclick	כשמקליקים הקלקה כפולה על אלמנט
ng-mouseenter	כשנכנסים עם העכבר לתוך אלמנט
ng-mouseleave	כשיוצאים עם העכבר מתוך אלמנט
ng-keypress	לחיצה על מקש במקלדת
ng-focus	כשנכנסים לשדה בטופס
ng-blur	כשיוצאים משדה בטופס

את ה-directive מכניסים לאלמנט, ובאותה הזדמנות גם מגדירים את הפונקציה שתגיב לאירוע. לדוגמה:


<a href="#" ng-click="addOne( )"> לחץ עליי </a>

בלינק שבדוגמה, אנחנו משתמשים במאזין לאירוע ng-click, ומגדירים שהפונקציה addOne() תגיב לאירוע.

האובייקט event

אנחנו יכולים להעביר את האובייקט $event כארגומנט לפונקציה. זהו האובייקט event של הדפדפן, והוא מאפשר לנו לעקוב אחרי הקוארדינטות של מיקום העכבר או למנוע מלחיצה על קישור לפתוח דף חדש.

כך זה נראה כשאנחנו מעבירים את האובייקט event לפונקציה:


<a href="#" ng-click="addOne( $event )"> לחץ עליי </a>

מיד נראה דוגמה קונקרטית בקוד שאנחנו מפתחים במדריך.

אפליקציה לדוגמה

במדריך זה נפתח מיני-אפליקציה שבמסגרתה אנחנו מוסיפים אחד או מורידים אחד מהערך בשדה טקסט בתגובה ללחיצה על לינקים.

לחצו על הלינקים שמופיע עליהם הכיתוב + ו - כדי לשנות את הערך של המספר המוצג בשדה.

+ -

נפתח את האפליקציה ב-5 שלבים

1. ניצור את האפליקציה ונגדיר את הקונטרולר


<div ng-app="myApp">
    <div ng-controller="mainController">

    </div>
</div>

האפליקציה מוגדרת באמצעות ng-app
הקונטרולר מוגדר באמצעות ng-controller

כיצד להגדיר את האפליקציה והקונטרולר?

2. נוסיף את 2 הלינקים ואת שדה הטקסט


<div ng-app="myApp">
    <div ng-controller="mainController">
        <a href="#"> + </a>
        <input type="text" value="">
        <a href="#"> - </a>
    </div>
</div>

לחיצה על הלינקים תשמש לעדכון הערך המספרי בשדה הטקסט.

3. נוסיף לקוד את ה-directive


<div ng-app="myApp">
    <div ng-controller="mainController">
        <a href="#" ng-click="addOne($event)"> + </a>
        <input type="text" value="{{ count }}">
        <a href="#" ng-click="subOne($event)"> - </a>
    </div>
</div>

ng-click מאזין לאירוע של הקלקה על הלינק, ומפעיל את הפונקציה בתגובה
המשתנה count הוא זה שישתנה בתגובה להקלקות

4. נוסיף את קוד ה-Angular


<script>
var myApp = angular.module("myApp", []);

myApp.controller("mainController", function($scope) {
    $scope.count = 0;
});
</script>

נגדיר את האפליקציה בקוד.
נגדיר את הקונטרולר.
נגדיר את המשתנה count, שערכו מתעדכן בתגובה ללחיצות על הלינקים.

5. נוסיף את הפונקציות


<script>
var myApp = angular.module("myApp", []);

myApp.controller("mainController", function($scope) {
    $scope.count = 0;
    
    $scope.addOne = function( event ) {
        event.preventDefault();
        $scope.count++;
    }
    
    $scope.subOne = function( event ) {
        event.preventDefault();
        $scope.count--;
    }
});
</script>

הפונקציה addOne() מוסיפה 1 למשתנה count, והפונקציה subOne() מפחיתה 1 מערכו של המשתנה.
כדי למנוע את ההתנהגות ברירת המחדל של פתיחת דף חדש בתגובה להקלקה על הלינק, אנחנו מעבירים לפונקציה את האובייקט event. הפונקציה מונעת את פתיחת הדף באמצעות preventDefault().

זה הקוד המלא שפיתחנו במדריך:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular events</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="mainController">
        <a href="#" ng-click="addOne($event)"> + </a>
        <input type="text" value="{{ count }}">
        <a href="#" ng-click="subOne($event)"> - </a>
    </div>
</div>

<script>
var myApp = angular.module("myApp", []);

myApp.controller("mainController", function($scope) {
    $scope.count = 0;
    
    $scope.addOne = function(event) {
        event.preventDefault();
        $scope.count++;
    }
    
    $scope.subOne = function(event) {
        event.preventDefault();
        $scope.count--;
    }
});
</script>
</body>
</html>

לסיכום

אחרי שבמדריך זה למדנו על אירועים ומאזינים לאירועים של Angular, במדריך הבא נלמד להשתמש ב- AJAX בדרך אנגולרית.

לכל מדריכי ה- AngularJS

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

נכתב ע"י יוסי בן הרוש

מתכנת אתרי אינטרנט, מומחה Laravel ו-Angular, והכותב של כל התכנים ב רשתטק תכנות אתרי אינטרנט

לכל המדריכים >>

המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.

למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.