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);
<!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>