AngularJS Live Example

by fess81

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div ng-controller = "fessCntrl"> 
 First Directive :	
    <first-dir >
        <h3>{{firstCtrl.data}}</h3>
        <button ng-click="doClick('NEW VALUE')">Change Value</button>
	</first-dir>
    
    Second Directive : 
    <second-dir>
        <h3>{{receivedData}}</h3>
	</second-dir>
</div>

CSS

button{
    position : absolute;
    right : 50px;
}
h3{
    padding : 50px;
    border : solid 1px lightgrey;
    width : 200px;
}

JavaScript

var app = angular.module('myModule', []);

app.controller('fessCntrl', function ($scope) {
   
    
});

app.$inject = ['$scope'];


app.directive("firstDir", function($rootScope){
		return {
			restrict : 'E',
			link: function(scope, element, attrs) {
                scope.dataToPass = 'empty';
                scope.doClick = function(valueToPass){
                    scope.dataToPass = valueToPass;
                    $rootScope.$broadcast('someEvent', {data: valueToPass});
                }
                
              
            }
		};	
	});
    
    app.directive("secondDir", function(){
		return {
			restrict : 'E',
			link: function(scope, element, attrs) {
                scope.receivedData = 'none';
                
                    scope.$on('someEvent', function(event, result) {
                       scope.receivedData = result.data;
                    });
            }
            }
		});