AngularJS inner directive attributes

http://stackoverflow.com/q/26448040/415057

by codef0rmer

HTML

<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<level-one>
    <level-two heading="one"></level-two>
    <level-two heading="two"></level-two>
</level-one>

CSS

table {
    width: 100%;
    border: 1px solid red;
}
thead td {
    background: gray;
    color: white;
    border-right: 1px solid red;
    text-align: center;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.directive('levelOne', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: 
            '<table>\
                <thead>\
                    <tr>\
                        <td ng-repeat="header in headers" ng-bind="header"></td>\
                    </tr>\
                </thead>\
            </table>\
            <table ng-transclude></table>',
        controller: function($scope, $element, $attrs) {
            $scope.headers = this.headers = [];
        }
    };
});

myApp.directive('levelTwo', function() {
    return {
        restrict: 'E',
        replace: true,
        require: '^levelOne',
        template: '<tr><td>body</td></tr>',
        link: function(scope, element, attrs, levelOneCtrl) {
            levelOneCtrl.headers.push(attrs.heading);
        }
    };
});