Angularjs Examples

AJS Examples


AngularJS $scope.$emit() Function

The AngularJS $emit method is used to dispatches an event name upwards and travel up to $rootScope.scope listeners. The $emit propagatesevent name upward and travel upwards toward $rootScope.scope listeners and calls all registered listeners along the way. The difference between $emit and $broadcast method is, the way they propagate or travelled from the source.

The life cycle of the event are starts when $emit method is called. The event traverses upwards toward the $rootScope.scope. The event will stop propagating if one of the listeners cancels it.

Syntax

$scope.$emit(name, args);

AngularJS $scope.$emit() Function Example


<!DOCTYPE html>        
<html>        
<head> <!-- www.techstrikers.com -->         
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>         
    <meta charset="utf-8">        
    <title>AngularJS $emit with $on Example</title>        
  <script>        
var app = angular.module('app', []);        
    app.controller("ParentController", function ($scope) {
		$scope.$on('event', function (event, args) {
         $scope.message = 'In Parent Controller: ' + args.message;
       });
    });
    app.controller("ChildController", function ($scope) {
      $scope.handleClick = function (msg) {
       $scope.$emit('event', { message: msg });
       };
    });
</script>        
</head>        
<body style="background-color:#DDE4E9;">        
  <fieldset style="background-color:#DDE4E9;">                    
    <legend>AngulerJS $emit with $on method Example</legend>         
  <div ng-app="app">              
    <div ng-controller="ParentController"> 
		<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">
			{{message}}
		  </p>
	<div ng-controller="ChildController"> 
      <input ng-model="msg">
      <button ng-click="handleClick(msg);">$emit</button>
      </div>
    </div>              
</div>        
 </fieldset>         
</body>        
</html>