$emit
- It can pass the value from child to parent.
- The event will stop propagating if one of the listeners cancels it.
- You can emit your event only when you have parent-child relation and event propagation is initiated by child. However, $emit can fire an event only for all $rootScope.$on listeners.
$broadcast
- It can pass the value from parent to child.
- The event cannot be canceled.
- If there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes but you cannot emit your event.
$on
- It listens on events of a given type. It can catch the event dispatched by $broadcast and $emit.
Example:
JS
MyApp.controller("EmitfirstCtrl", function ($scope) {
$scope.$on('eventName', function (event, args) {
$scope.message = args.message;
});
});
MyApp.controller("EmitsecondCtrl", function ($scope) {
$scope.handleClick = function (msg) {
$scope.$emit('eventName', {
message: msg
});
};
});
MyApp.controller("BroadcastFirstCtrl", function ($scope) {
$scope.handleClick = function (msg) {
$scope.$broadcast('eventName', {
message: msg
});
};
});
MyApp.controller("BroadcastSecondCtrl", function ($scope) {
$scope.$on('eventName', function (event, args) {
$scope.message = args.message;
console.log($scope.message);
});
});
MyApp.controller("BroadcastFirstCtrlEx2", function ($scope, $rootScope) {
$scope.handleClick = function (msg) {
$rootScope.$broadcast('eventName', {
Information: msg
});
};
});
MyApp.controller("BroadcastSecondCtrlEx2", function ($scope) {
$scope.$on('eventName', function (event, args) {
$scope.Information = args.Information;
});
});
MyApp.controller("BroadcastThirdCtrlEx2", function ($scope) {
$scope.$on('eventName', function (event, args) {
$scope.Information = args.Information;
});
});
html
<fieldset>
<legend>AngulerJS <b>$emit</b> with $on method Example</legend>
<div ng-controller="EmitfirstCtrl" style="border:2px solid #E75D5C; padding:2px;">
<p>Parent Controller Emit Message :{{message}} </p>
<div ng-controller="EmitsecondCtrl" style="border:2px solid #428bca;">
Child Controller : <input ng-model="msg" />
<button ng-click="handleClick(msg);">Emit</button>
</div>
</div>
</fieldset>
<br/><br/>
<fieldset>
<legend>AngulerJS <b> $Broadcast</b> with $on method Example 1</legend>
<div ng-controller="BroadcastFirstCtrl" style="border:2px solid #E75D5C; padding:5px;">
Parent Controller
<input ng-model="msg">
<button ng-click="handleClick(msg);">Broadcast</button>
<br /><br />
<div ng-controller="BroadcastSecondCtrl" style="border:2px solid #428bca;padding:5px;">
Child Controller Broadcast Message : {{message}}
</div>
</div>
</fieldset>
<br/><br/>
<fieldset>
<legend>AngulerJS <b> $Broadcast</b> with $on method Example 2</legend>
<div ng-controller="BroadcastFirstCtrlEx2" style="border:2px solid #E75D5C; padding:5px;">
Parent Controller
<input ng-model="msg">
<button ng-click="handleClick(msg);">Broadcast</button>
</div>
<br />
<div ng-controller="BroadcastSecondCtrlEx2" style="border:2px solid #428bca;padding:5px;">
Child Controller Broadcast Message: {{Information}}
</div>
<br />
<div ng-controller="BroadcastThirdCtrlEx2" style="border:2px solid #428bca;padding:5px;">
Child Controller Broadcast Message: {{Information}}
</div>
</fieldset>
I created a fiddle here with a demo:
https://jsfiddle.net/o8q46daL/