AngularJS Web Application Development Cookbook

Optional nested directive controllers

The AngularJS construct that allows you to build channels of communication between directive siblings or parents in the same DOM ancestry also allows you to optionally require a directive controller of a sibling or parent.

Getting ready

Suppose that your application includes the following:

(index.html) <div ng-app="myApp"> <div parent-directive> <div child-directive sibling-directive> </div> </div> </div> (app.js) 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!'); ...