Angular:

http://angularjs.org/

by gogirl

HTML

<div ng-controller="MyCtrl">
    <h2>Controllers-requiring-parent-directive-controllers </h2>
  <div screen class="box3">1 Screen's topFunction1 defined on scope not on this function($scope)
    <div component class="box2">2Component's wrappedFunction wraps topFunction1  defined on scope not on this function($scope)
        <div widget class="box1">3 Widget  triggers some behavior in component calling both functions
            <button ng-click="callAll()">{{name}}</button>
        </div>
    </div>
</div>
</div>

CSS

.box1
{
border-width:5px;	
border-style:solid;
width: 150px;
height: 150px;    
}
.box2
{
border-width:5px;	
border-style:solid;
width: 200px;
height: 200px;    
}
.box3
{
border-width:5px;	
border-style:solid;
width: 300px;
height: 300px;    
}

JavaScript

var myApp = angular.module('myApp',[])
function MyCtrl($scope) {
    $scope.name = 'Widget';
}

//Both component and widget will have access to function //topFunction1 since defined on scope.
//http://stackoverflow.com/questions/15622863/angularjs-//directive-controllers-requiring-parent-directive-//controllers
myApp.directive('screen', function() {
    return {
        //scope: true
        controller: function($scope) {
            $scope.topFunction1 = function() {
                alert("topFunction1 called!");
            }
        }
    }
})

.directive('component', function() {
    return {
        //scope: true,
        controller: function($scope) {
            $scope.wrappedFunction2 = function() {
                $scope.topFunction1();
                alert("wrappedFunction2 called!");
            }
        },
    }
})

.directive('widget', function() {
    return {
       // scope: true,
        link: function(scope, element, attrs, componentCtrl) {
            scope.callAll = function() {
                scope.wrappedFunction2();
                scope.topFunction1();
            };
        }
    }
})
//fails if moved before all directives
function MyCtrl($scope) {
    $scope.name = 'Widget';
}