Accessing parent directive's controller recursively in AngularJS

Question

I need to get parent's controller, so my directive has a require property, as follows:

module.directive('tag', function () {
    return {
        require: '?^tag',
        restrict: 'E',
        controller: function () {
            this.payload = getPayload();
        },
        link: function (scope, element, attrs, ctrl) {
            usePayload(ctrl.payload);
        }
    };
});

However the ctrl parameter of the link function returns the controller of the current directive, not the parent's one. AngularJS documentation is clear about this:

?^ - Attempt to locate the required controller by searching the element's parents, or return null if not found.

What am I doing wrong?

require: '?^parent' or assign directive's controller to the name of the parent controller or leave off the directive's controller all together and ctrl in the link parameters will default to the parent. — m.e.conroy
– m.e.conroy, Commented Oct 11, 2013 at 14:10
Have a look at this video by John Lindquist which explains communicating between nested directives pretty well. — Jonathan Palumbo
– Jonathan Palumbo, Commented Oct 11, 2013 at 14:14
@m.e.conroy: I have to use the same name in require. If no controller is declared, ctrl defaults to undefined. — Herman Kan
– Herman Kan, Commented Oct 11, 2013 at 14:36
@JonathanPalumbo: That example is not recursive meaning the directive names are different. — Herman Kan
– Herman Kan, Commented Oct 11, 2013 at 14:39

Peter Aron Zentai · Accepted Answer · 2014-05-26 15:39:07Z

10

Either the docs or the code are misleading here... require with ^ looks at the current element and then all parent, using the inheritedData method (see https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L942). So you won't be able to require a directive with the same name from a parent using this approach.

When I've had this issue in the past I've looked at the form directive which needs to do what you are asking. Its controller method grabs the parent like so (https://github.com/angular/angular.js/blob/master/src/ng/directive/form.js#L39):

controller: function($element) {
    var parentForm = $element.parent().controller('form');
}

Taking this, you should be able to call element.parent().controller('tag') to find the parent controller either in the controller or postLink methods.

edited May 26, 2014 at 15:39

Peter Aron Zentai

11.8k6 gold badges43 silver badges72 bronze badges

answered Oct 11, 2013 at 16:52

Andyrooger

6,7461 gold badge45 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Herman Kan Over a year ago

This works, thanks! My only concern is that the controller() method is not exposed in their API, so not intended for public use and may be subject to change.

Andyrooger Over a year ago

Docs can be found buried in those for angular.element: docs.angularjs.org/api/angular.element. This is definitely documented in the unstable branches but I haven't checked stable.

Brian Rizo Over a year ago

This is so helpful. Thanks, i wanted to make an element that could act as a container for itself, so, this is perfect. Also, I've read it's not a good idea to pass the element to the controller so you could always work with the element in the link function

Collectives™ on Stack Overflow

Accessing parent directive's controller recursively in AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related