Check out the demo here: http://jsfiddle.net/sunnycpp/MPACc/4/
Here is the same code pasted below: HTML
<div class="container">
<debug-bar ng-controller="parentController">
<debug-bar ng-controller="childController">
<debug-bar ng-controller="oneMoreChildController"></debug-bar>
</debug-bar>
<debug-bar ng-controller="oneMoreChildController"></debug-bar>
</debug-bar>
</div>
Javascript
var angModule = angular.module('components', []);
angModule.directive('debugBar', function () {
return {
restrict: 'E',
template:
'<div>'+
'<form class="form-inline">' +
'<input type="text" class="input-small" ng-model="myText"/>' +
'<button class="btn btn-primary">Broadcast</button>' +
'<button class="btn btn-primary">Emit</button>' +
'</form>' +
'<div ng-transclude></div>'+
'</div>',
transclude: true,
replace: true
};
});
function createController(myText) {
return function ($scope) {
$scope.myText = myText;
$scope.$on("event", function (senderText) {
console.log("Event received in:" + $scope.myText + " from Sender:" + senderText);
});
$scope.$broadCastEvent = function () {
$scope.$broadcast("event", $scope.myText);
console.log("Sent event from:" + $scope.myText);
};
};
}
angModule.controller("parentController", createController("In parent"));
angModule.controller("childController", createController("in FirstChild"));
angModule.controller("oneMoreChildController", createController("in oneMoreChildController"));
angModule.controller("oneMoreChildController", createController("in secondLevelChild"));