נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

מחבר:
בתאריך:

אחרי שבמדריך קודם טיפלנו ב- 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

הוסף תגובה חדשה

 

= 9 + 3

תמונת המגיב

שולמית בתאריך: 22.06.2017

שלום,
המדריך מצוין.
מאיזו בחינה שונה ה - ng-click
של אנגולר, מ- onclick של JAVASCRIPT?