What does "require" of directive definition object take?
angularjs, angularjs-directive
Solution
This particular topic of the documentation is indeed confusing, however as strange as it seems to be it all makes sense.
The key to understand the logic behind this definition is to understand that "directive controller" refers to a directive's controller instance and not a controller factory.
Following the tabs example, when a `tabs` element is created, a new instance of the `TabsController` is also created and attached to that specific element data, something like:
tabElement.data('$tabsController', tabsControllerInstance)
The `require: '^tabs'` on the `pane` element is basically a request for that specific controller instance (`tabsControllerInstance`) being used on the parent `tabs` element.
Problem
require - Require another controller be passed into current directive linking function. The require takes a name of the directive controller to pass in. If no such controller can be found an error is raised. The name can be prefixed with: - ? - Don't raise an error. This makes the require dependency optional. - ^ - Look for the controller on parent elements as well. Above is the definition from the official docs. The ambiguity here is what exactly is a "directive controller". Take the tabs directive from the angularjs-ui bootstrap project, as an example. ``` angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { ... // omitted for simplicity }]) .directive('tabs', function() { return { restrict: 'EA', transclude: true, scope: {}, controller: 'TabsController', templateUrl: 'template/tabs/tabs.html', replace: true }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@' }, link: function(scope, element, attrs, tabsCtrl) { ... // omitted for simplicity }, templateUrl: 'template/tabs/pane.html', replace: true }; }]); ``` The `pane` directive has `require: '^tabs'`, in which `tabs` is the name of a directive on its parent element, while the name of the controller attached to that directive is `TabsController`. From my own interpretation of the above definition, it should have been `require: '^TabsController'` not `require: '^tabs'` and that's obviously wrong. Please tell me what am I missing in my comprehension.