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 {
        scope: true,
        controller: function($scope) {
            $scope.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function($scope) {
            $scope.componentFunction = function() {
                $scope.doSomethingScreeny();
            }
        },
    }
})

.directive('widget', function() {
    return {
        scope: true,
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                scope.componentFunction();
                scope.doSomethingScreeny();
            };
        }
    }
})


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

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