Using "require" in Directive to require a parent Controller

Question

I try to "require" a parent controller (not directive) but AngularJS returns an exception. The code is like this:

JS

app.controller("myController", function ($scole) {
    ...
});

app.directive("myDirective", function ($q) {
    return {
        require: "^myController",
        template: "",
        link: function (scope, element, attrs, myCtrl) {
            ...
        }
    };
});

HTML

<div ng-controller="myController as myCtrl">
    ...
        <div my-directive>...</div>
    ...
</div>

Error

Error: [$compile:ctreq] Controller 'myController', required by directive 'myDirective', can't be found!

Why?
Maybe, require property must be reference to a controller of directive?

Thanks

Answer 1

Notation require: "^myController" means that your directive will try to access another directive called myController and defined on some of the ancestor tags as my-controller attribute or <my-controller> tag. In your case you don't have such directive, hence the exception.

This is not very conventional what you are trying to do, but if you really want to require outer controller in your directive you can require ngController:

app.directive("myDirective", function($q) {
    return {
        require: "^ngController",
        template: "",
        link: function(scope, element, attrs, myCtrl) {
            // ...
            console.log(myCtrl);
        }
    };
});

However, this is not very good idea. I can't imagine why you might need it like this. I would recommend to look into scope configuration properties and how you can pass executable function references into your directive from outer controller.

<div my-directive some-callback="test()"></div>

and in directive define scope:

scope: {
    someCallback: '&'
}

where in controller you would have $scope.test = function() {};. Then you would not need to require controller explicitly in directive.