Previous

AngularJS Events

In AngularJS, events play a key role in creating interactive applications. AngularJS provides a powerful way to handle browser events like mouse clicks, keyboard actions, and more. You can also listen for custom events triggered by the application itself, making it highly interactive.

Key Concepts of AngularJS Events

  1. ng-click: Handles click events on elements.
  2. ng-dblclick: Handles double-click events on elements.
  3. ng-mouseover/ng-mouseout: Detects mouse hover events.
  4. ng-keyup/ng-keydown: Handles keyboard events, such as key presses.
  5. $emit / $broadcast / $on: Mechanisms for custom events in AngularJS.

 

Common Event Directives in AngularJS

ng-click

The ng-click directive is used to attach a click event to an element and specify the action to be performed when the element is clicked.

Example of ng-click:

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="changeMessage()">Click Me</button>
  <p>{{message}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.message = "Hello, AngularJS!";
    $scope.changeMessage = function() {
      $scope.message = "You clicked the button!";
    };
  });
</script>
  • ng-click="changeMessage()": Executes the changeMessage() function when the button is clicked.

ng-dblclick

The ng-dblclick directive is used to detect double-click events.

Example of ng-dblclick:

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-dblclick="changeMessage()">Double-click here to change message</div>
  <p>{{message}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.message = "Hello, AngularJS!";
    $scope.changeMessage = function() {
      $scope.message = "You double-clicked the text!";
    };
  });
</script>
  • ng-dblclick="changeMessage()": Executes the changeMessage() function when the element is double-clicked.

ng-mouseover and ng-mouseout

These directives allow you to track when the mouse enters or leaves an element.

Example of ng-mouseover/ng-mouseout:

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-mouseover="hover=true" ng-mouseout="hover=false">
    Hover over this text
  </div>
  <p ng-show="hover">Mouse is over the text!</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.hover = false;
  });
</script>
  • ng-mouseover="hover=true": Sets the hover variable to true when the mouse is over the element.
  • ng-mouseout="hover=false": Sets the hover variable to false when the mouse leaves the element.

ng-keyup and ng-keydown

These directives are used to handle keyboard events when a key is pressed or released.

Example of ng-keyup/ng-keydown:

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-keyup="keyUpFunction($event)" placeholder="Press any key">
  <p>{{key}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.key = "";
    $scope.keyUpFunction = function(event) {
      $scope.key = "You pressed: " + event.key;
    };
  });
</script>
  • ng-keyup="keyUpFunction($event)": Triggers the keyUpFunction() when the user releases a key. The $event object contains information about the key pressed.

 

Custom Events in AngularJS

AngularJS allows you to create custom events using $emit, $broadcast, and $on. These methods enable communication between controllers or components in an AngularJS application.

  1. $emit: Sends an event upwards from a child controller to its parent.
  2. $broadcast: Sends an event downwards from a parent controller to its child controllers.
  3. $on: Listens for an event.

Example with $emit and $on

<div ng-app="myApp" ng-controller="parentCtrl">
  <button ng-click="sendEvent()">Send Event</button>
  <div ng-controller="childCtrl">
    <p>{{message}}</p>
  </div>
</div>

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

  app.controller("parentCtrl", function($scope, $rootScope) {
    $scope.sendEvent = function() {
      $rootScope.$emit("myCustomEvent", "Hello from parent controller");
    };
  });

  app.controller("childCtrl", function($scope, $rootScope) {
    $rootScope.$on("myCustomEvent", function(event, data) {
      $scope.message = data;
    });
  });
</script>
  • $rootScope.$emit("myCustomEvent", data): Sends an event from the parent controller.
  • $rootScope.$on("myCustomEvent", callback): Listens for the custom event in the child controller and processes the data.

 

Summary

AngularJS provides a robust way to handle various events like mouse actions, keyboard inputs, and custom events. By using directives like ng-click, ng-dblclick, ng-mouseover, ng-keyup, and $emit, $broadcast, $on, you can efficiently create interactive and responsive web applications. Custom events make communication between different parts of the application seamless, while built-in event directives allow for quick development of event-driven features.

Previous