Using both controller and require option inside angular directive

Question

I'm looking for a way to access both controllers inside the directive. Currently it's not working and I don't know why or if it's even possible.

If I use both require and controller option, inside the link function ctrl property refers to whatever I requested via the require option.

I can't think of a way to access the controller inside the link function when the require option is present.

It seems that these two properties are mutually exclusive ?

angular.module('moduleName').directive('directiveName', [function () {

    return {
    controller: 'MediaController',
    require:'ngController',
    link: function (scope, element, attributes, ctrl) {

        // I need access to both controllers here

    }

}

}]);

Not mutually exclusive, they do different things. The directive's controller is never the "ctrl" param to the link function. It is either the one you "require" or it is not there. If you need to share data and functions between the controller and link functions, then just include them in the directive outside of the return object. — aet
– aet, Commented Apr 15, 2014 at 22:17
@aet "The directive's controller is never the "ctrl" param to the link function" - That's wrong. Read the docs. — a better oliver
– a better oliver, Commented Apr 16, 2014 at 7:38

a better oliver · Accepted Answer · 2014-04-16 07:45:10Z

2

If you want both controllers, then require both controllers:

angular.module('moduleName').directive('directiveName', [function () {

return {
controller: MediaController,
require:['directiveName', 'ngController'],

In this case ctrl is an array containing the two controllers.

answered Apr 16, 2014 at 7:45

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

4 Comments

Ivan V. Over a year ago

I need access to MediaController not controllers on other directives.

a better oliver Over a year ago

@IvanV. MediaController IS the controller of your directive.

Ivan V. Over a year ago

Okay that works. First time a read it I glanced through and didn't see that you are referring to directive itself.Is this a hack or this is a valid think to do in AngularJs? I haven't seen this anywhere else ( directive requiring itself).

a better oliver Over a year ago

@IvanV. It's even used by angular itself for some directives. E.g. ng-model has require: ['ngModel', '^?form']. So no, it's not a hack :)

Jordan Papaleo · Accepted Answer · 2014-04-15 22:48:20Z

0

Without really knowing why you need to access both controllers, I can only offer minimal advice here. My suggestion would be to create a service to handle cross controller needs. Services are singletons and they support data binding. Services are my preference for cross controller work every day. For example:

App.controller('Ctrl1', function Ctrl1 ($scope, TestService) {
    $scope.someValue = TestService.getValue();
});

App.controller('Ctrl2', function Ctrl2 ($scope, TestService) {
    $scope.someValue = TestService.getValue();
});

App.factory('TestService', function() {
    var myVal = "I Bound";

    return {
        getValue: function() {
            return myVal;
        }
    }
});

This method allows you to abstract a controllers need to directly access another controller. Your services can be pulled into these directives or other services too. I hope this helps a bit.

Thanks,

Jordan

answered Apr 15, 2014 at 22:48

Jordan Papaleo

1,51111 silver badges25 bronze badges

2 Comments

Ivan V. Over a year ago

Well maybe what I'm trying to do can be done in some other way.

Ivan V. Over a year ago

Well maybe what I'm trying to do can be done in some other way. I'm fairly new to angular. Let's say I have a directive that represents a base media component (<media-component>) I also have video component 'sound component` X component etc... And I'm trying to have as little as possible code repetition, so I'm thinking of some kind of component/controller inheritance. So the basic component has methods for playing and stopping and then the video component extends those methods to playing and stopping video source, music component for playing/stopping music etc...

Collectives™ on Stack Overflow

Using both controller and require option inside angular directive

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related