Of Stack

On Events in angularJS

  • 2021-07-02 23:23:25
  • OfStack

What is an event

angular applications can respond to angular events just as browsers respond to browser-level events, such as mouse clicks and focus

The angular event system does not communicate with the browser's event system, and we can only listen for angular events instead of DOM events on the scope

Event propagation

Because scopes are hierarchical, we can pass events in the scope chain:

• Using the $emit bubble event, the event bubbles from the current sub-scope to the assigned scope, and all scopes above the scope where the event was generated are notified of this event

The $emit () method takes two parameters:

name the name of the event to be emitted

args 1 parameter collection passed as an object to the event listener

• Pass down an event using $broadcast, and each child scope that registers a listener receives this message

The $broadcast () method takes two parameters:

name the name of the event to broadcast

args 1 parameter collection passed as an object to the event listener

• Listening for events using $on

The $on () method takes two parameters:

event Event Object

param parameter set, sample parameter set passed by $broadcast (), $emit (): 


demo.html

 <!doctype html>
 <html ng-app="freefedApp">
   <head>
     <title>angular Application demo</title>
     <script src="angular.js"></script>
     <script src="app.js"></script>
  </head>
  <body>
  <div ng-controller="freefedCtrl">
     <div event-directive change="change(title)"></div>
   </div>
  </body>
 </html>

app.js

 /* Declaration module*/
 var module = angular.module('freefedApp',[]);

 /* Declaration controller */
 module.controller('freefedCtrl',['$scope',function($scope){
     // Eavesdropping directiveClick Events 
     $scope.$on('directiveClick',function(event,param){
        console.log( param );  //  Print results  {title : ' I am from an instruction child scope '}
     });

     $scope.change = function(title){
       var result = ' Note that the parent broadcast is received ';
       // Broadcast to child scope parentBroadcast Events 
       $scope.$broadcast('parentBroadcast',{msg : result});
     };
 }]);

 /* Declarative instruction */
 module.directive('eventDirective',function(){
    return {
       scope : {
         change : '&'
       },
      replace : true,
      template : '<a> Point me up bubbling event </a>',
       link : function( scope,el,attr ){
         el.on('click',function(){
          // Upward bubbling directiveClick Event to notify the parent scope 
           scope.$emit('directiveClick',{title : ' I am from an instruction child scope '});
         });

        // Eavesdropping parentBroadcast Event broadcast 
        scope.$on('parentBroadcast',function(event,msg){
           console.log( msg );  // Print results  { msg :  Note that the parent broadcast is received  }
        });
       }
    };
 });

Event object properties

The event event object properties in $on are as follows:

• ES 64EN (scope object)

Scope of sending or broadcasting events

• ES 69EN (scope object)

The scope of the current processing event

• ES 74EN (string)

The name of the event being processed

• ES 79EN (function)

The stopPropagation () function cancels further propagation of events triggered by $emit

preventDefault (function) preventDefault () sets the defaultprevented flag to true. Although the event propagation cannot be stopped, the sub-scope can know through the defaultprevented flag that it is not necessary to handle this event

• ES 93EN (Boolean)

The defaultPrevented attribute can be used to judge whether the events propagated by the parent can be ignored

Related articles: