AngularJS - Pub/Sub Clean! ALT w/ broadcast params
This is an example of how to use a custom service to facilitate communicate between multiple controllers using $rootscope as an event bus.
by gavinfoley
HTML
<div ng-controller="ControllerZero">
<input ng-model="message">
<button ng-click="handleClick(message);">LOG</button>
</div>
<div ng-controller="ControllerOne">
<input ng-model="message">
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message">
</div>
<!--
String.format = function() {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i + 1]);
}
return s;
} -->
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<style>
input{ width: 300px; }
JavaScript
var myModule = angular.module('myModule', []);
myModule.factory('messageService', function ($rootScope) {
var messageServiceHandle = "broadcastMessageService"; // private
var messageService = {};
//messageService.message = '';
messageService.setNewMessage = function (msg, note) {
//this.message = msg;
this.broadcastNewMessage(msg, note);
};
messageService.broadcastNewMessage = function (msg, note) {
$rootScope.$broadcast(messageServiceHandle, msg, note);
console.log("Setting ", msg);
console.log("Setting ", note);
};
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;
});
function ControllerZero($scope, messageService) {
$scope.handleClick = function (msg) {
messageService.setNewMessage(msg, "my note");
};
}
function ControllerOne($scope, messageService) {
messageService.onNewMessage(function (event, msg, note) {
$scope.message = "Ctrl1 - Message is : {0}. Note is: {1}.".format(msg, note);
}, $scope);
}
function ControllerTwo($scope, messageService) {
var msgUpdate = messageService.onNewMessage(function (event, msg, note) {
$scope.message = "Ctrl2 - Message is : {0}. Note is: {1}.".format(msg, note);
});
$scope.$on('$destroy', msgUpdate);
}
String.prototype.format = String.prototype.f = function() {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
}
return s;
};