Angular:

http://angularjs.org/

by Sunny SM

HTML

<div ng-controller="MyCtrl">
  <div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>
</div>

JavaScript

var myApp = angular.module('myApp',[])

.directive('screen', function() {
    return {
    		strict:'EA',
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function(alertTxt) {
                alert(alertTxt);
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        strict:'EA',
        require: '^screen',
        controller: function($scope) {
            this.componentFunction = function() {
                $scope.screenCtrl.doSomethingScreeny("Hello from the Component Directive");
            }
        },
        link: function(scope, element, attrs, screenCtrl) {
            scope.screenCtrl = screenCtrl
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        strict:'EA',
        require: ["^component", "^screen"],
        link: function(scope, element, attrs, controllersArr) {
            scope.widgetIt = function() {
                controllersArr[0].componentFunction();
                controllersArr[1].doSomethingScreeny("Hello from the Widget Directive");
            };
            
        }
    }
})


//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}