Can we link two controllers to a single custom directive

Question

0.00/5 (No votes)

See more:

Hi All,
I tried to find linking of multiple controllers to a single custom directive, but no solution. Is this possible to achieve or not. Can anybody please tell me.

Posted 15-Oct-14 3:37am

Kumarbs

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

onelopez · Answer 1 · 2014-10-15T04:02:00

Solution 1

When you add a directive to the HTML it creates an instance of that directive. Depending on how you have configured it, the scope is the only thing they will share with the parent controller. If you need to share information between controllers / directives try creating a factory of the shared information instead. The factory is a singleton that will allow you to pass information / functionality around to whomever invokes the factory.

Posted 15-Oct-14 4:02am

onelopez

Comments

Kumarbs 15-Oct-14 11:09am

I am not meant of using factory. If i use factory i can handle the data in between those. My problem is i have a controller and have a couple of functions handling on it. By default a controller has been registered for a directive. Now i want to execute both the controllers.

onelopez 15-Oct-14 14:34pm

Maybe you want to use a broadcast / emit from the directive and add an event listener to the controllers so that they fire off simultaneously. If you don't have access to the controller, then I'm not sure how to approach this.

On the directive do something like:

$scope.$broadcast('fireOnController', {args:'foo'});

On controller do:
$scop.$on('fireOnController', function(sender, args){
// Do something with args here
});

Kumarbs 15-Oct-14 23:57pm

Thank you for the info. But i have tried this too but no doors are open. I will give some code snippet so that you may have a chance of giving more ideas.

<div ng-controller="controllername">
<my-directive>

In the controller i have a couple of functions like
app.controller("controllername",['$scope','function($scope))
{
$scope.functionName = function()
{
alert(1);
}]
}

I need to call this function in the directive controller.
Thank you for your time being spent on this.

onelopez · Answer 2 · 2014-10-16T21:51:00

Solution 2

if the function is defined on the scope, you should be able to call it through the scope on the directive, unless it's not a shared scope. Then what you can do is attach it to the controller like so:

JavaScript

app.controller( 'myController', function( ) { 
    var me = this;
    me.myFunc = function ( ) { console.log ( ' hello world ' ) ; };
} )
. directive( 'myDirective', function ( ) {
    return {
        scope: { myVar : true },         // <- This creates isolated scope. If this is not defined, then it's a shared scope
        controller : '^myController',  // Tell Angular you need this controller.    Required. 
        // some other stuff for directive
        link : function ( $scope, element, attribute, ctrl ) {
                ctrl.myFunc ( ) ;  // you have access here to all controller's functions
        }        
    }
} ) ;

Let me know if this helps.

Posted 16-Oct-14 21:51pm

onelopez

Comments

Kumarbs 17-Oct-14 11:46am

Thank you for the feedback. But in the directive i have already created a controller to perform certain operations. Where as in your case you mentioned a controller outside of the directive and mapped it to the directive. But in my case the directive controller and the outside controller should work on top of the directive.
Thank you for your time spending on this.

onelopez 17-Oct-14 18:11pm

You're going to have to have a shared scope then, between the controller on the directive, and the parent controller. No other way around it. If you had stuff in the scope from the directive access it through the attribute instead. Like so:

// pretend this is the link function to the directive
function link( $scope, element, attr ){
attr.$observe ( 'myVar' , function ( ) {
// this function let's you know when variable changes.
// kind of like $scope.$watch but for attributes instead
});

consoloe.log( attr.myVar ); // this contains just a string, no bueno. we need the value

var value = $scope . $eval ( attr. myVar ); // <- We get the actual value of what it's meant to have
// you can use or not use the value.

( $scope.myFunc || $scope.$parent.myFunc ) ( ); // <- myFunc on the scope if for the controller on the directive, myFunc on the parent is the controller who invoked the directive.
}

Let me know if that works.

Kumarbs 17-Nov-14 1:27am

( $scope.myFunc || $scope.$parent.myFunc ) ( );
Will execute the parent controller function? If so that will be fine.
But in this case, i think all the functions in the parent controller should be called in the directive. But in my case i would have 100's of functions in the parent controllers because i call the directive in many pages. I can't call these functions in the directive, they should be automatically fired.

onelopez 20-Nov-14 10:11am

Not sure what you mean with your statement of automatically firing function calls. How are you going to trigger these calls?

Also, even though you have the functionality wrapped in a directive, ever node/attribute/class/comment to activate a directive makes a new instance of it. So on every page you will have a new instance of it. Unless you do a broadcast to an event for which there's a listener to, pages will have their own behavior.

Also, a service is recommended to house common functionality; unlike a directive, only one instance of a service exists during the lifetime of the application, aka singleton.