Chapter 1: Interaction between nested directives

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div parent-directive>
        <div child-directive 
             sibling-directive>
        </div>
    </div>
</div>

JavaScript

angular.module('myApp', [])
.directive('parentDirective', function ($log) {
    return {
        controller: function () {
            this.identify = function () {
                $log.log('Parent!');
            };
        }
    };
})
.directive('siblingDirective', function ($log) {
    return {
        controller: function () {
            this.identify = function () {
                $log.log('Sibling!');
            };
        }
    };
})
.directive('childDirective', function ($log) {
    return {
        require: ['^parentDirective', '^siblingDirective'],
        link: function (scope, el, attrs, ctrls) {
            ctrls[0].identify();
            // Parent!
            ctrls[1].identify();
            // Sibling!
        }
    };
});