AngularJS - Pub/Sub Clean!
This is an example of how to use a custom service to facilitate communicate between multiple controllers using $rootscope as an event bus.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-controller="ControllerZero">
<input ng-model="message">
<button ng-click="handleClick(message);">Broadcast message</button>
</div>
<br>
<br>
<br>
<span>Listeners</span>
<div ng-controller="ControllerOne">
<input ng-model="message">
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message">
</div>
JavaScript
var myModule = angular.module('myModule', []);
// Our pub/sub service
myModule.factory('messageService', function($rootScope) {
console.log('messag')
var messageServiceHandle = "message:send"; // private namespace
var messageService = {};
messageService.message = '';
messageService.setNewMessage = function(msg) {
this.message = msg;
this.broadcastNewMessage();
};
messageService.broadcastNewMessage = function() {
$rootScope.$broadcast(messageServiceHandle, messageService.message);
};
messageService.onNewMessage = function(callback, scopeRef) {
var unbind = $rootScope.$on(messageServiceHandle, callback);
if (scopeRef) {
scopeRef.$on('$destroy', unbind);
}
return unbind; // Return for self management
};
return messageService;
});
// Broadcast a message from this controller to whoever's listening
myModule.controller('ControllerZero', function($scope, messageService) {
$scope.message='pushkal';
messageService.setNewMessage('pushkal');
$scope.handleClick = function(msg) {
messageService.setNewMessage(msg);
};
});
// Listening controller 1
myModule.controller('ControllerOne', function($scope, messageService) {
// Listen for messages and pass in scope so our listener
// will be destroyed when the scope is
messageService.onNewMessage(function() {
$scope.message = 'ControllerOne: ' + messageService.message;
}, $scope);
});
// Listening controller 2
myModule.controller('ControllerTwo', function($scope, messageService) {
var msgUpdate = messageService.onNewMessage(function() {
$scope.message = 'ControllerTwo: ' + messageService.message;
});
// Manually remove our listener when scope is destroyed
$scope.$on('$destroy', msgUpdate);
});