current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a directive and a controller. The directive defines a function in its isolate scope. It also references a function in the controller. That function takes a callback. However, when I call it from the directive and pass in a callback, the callback is passed through as undefined. The code below will make this more clear:

Directive

directive('unflagBtn', ["$window", "api",
    function($window, api) {
        return {
            restrict: "E",
            template: "<a ng-click='unflag(config.currentItemId)' class='btn btn-default'>Unflag</a>",
            require: "^DataCtrl",
            scope: {
                config: "=",
                next: "&"
            },
            controller: ["$scope",
                function($scope) {
                    $scope.unflag = function(id) {
                        $scope.next(function() { //this callback does not get passed
                            api.unflag(id, function(result) {
                                //do something
                                return
                            });
                        });
                    };
                }
            ]
        };
    }
]);

Controller

controller('DataCtrl', ['$rootScope', '$scope', 'api', 'dataManager', 'globals',
    function($rootScope, $scope, api, dataManager, globals) {
        ...
        $scope.next = function(cb) { //This function gets called, but the callback is undefined.
            // do something here 
            return cb ? cb() : null;
        };
    }
]);

HTML

<unflag-btn config="config" next="next(cb)"></unflag-btn>

I've read here How to pass argument to method defined in controller but called from directive in Angularjs? that when passing parameters from directives to controller functions, the parameters need to be passed in as objects. So I tried something like this:

$scope.next({cb: function() { //this callback does not get passed still
    api.unflag(id, function(result) {
        //do something
        return
    });
}});

But that did not work. I am not sure if this matters, but I should note that the directive is placed inside a form, which in its place is inside a controller. Just to illustrate the structure:

<controller>
   <form>
        <directive>
   <form>
<controller>

Hope this is clear and thanks in advance!

share|improve this question
    
What are you trying to do. Are you trying to pass a regular controler to a directive. when using required you are getting the controller of in this case a parent directive. Is a way to communicate between directive. Can you explain what are you trying to do. –  Jorge Enrique Reyes Salas Mar 31 '14 at 2:15
    
The function next() is in a controller and it controls the view. It takes a callback. I am trying to have different directives access that function. I am doing it this way because I want different directives to pass different callbacks to the function depending on what I need to do. But for some reason when I call next from a directive and pass it a callback, when the controller receives the call the callback is undefined... I hope this makes it more clear? –  Levon Tamrazov Apr 1 '14 at 14:40

2 Answers 2

up vote 0 down vote

Try this

        controller: ["$scope",
            function($scope) {
                $scope.unflag = function(id) {
                    $scope.next({
                        cb: function() { //this callback does not get passed
                            api.unflag(id, function(result) {
                                //do something
                                return;
                            });
                        }
                    });
                };
            }
        ]
share|improve this answer
    
Hi, sorry for the late reply. But this did not work... when the controller receives the call for next() cb is still undefined. –  Levon Tamrazov Apr 18 '14 at 16:14
up vote 0 down vote accepted

So I unintentionally figured out whats wrong after not being able to pass an object back to the controller as well. What happened, (and what I probably should have mentioned in the question had I known that its relevant) is that the parent scope of this directive unflagbtn is actually the scope of another directive that I have, call it secondDirective. In its turn the secondDirective is getting its scope from "DataCtrl". Simplified code looks like this:

directive("secondDirective", [function(){
    require: "^DataCtrl" // controller
    scope: {
        next: "&" // function that I was trying to call
    }
    ...
    // other code
    ...
}]);

directive("unflagbtn", [function(){
    require: "^DataCtrl" // controller 
    scope: {
        next: "&"
    }, 
    controller: ["$scope", function($scope){
        $scope.unflag = function(){
            $scope.next({cb: {cb: callBackFunctionIWantedToPass}); // this is what worked
        }
    }
}]);

So passing a callback in that manner solved my problem as it made its way back to the controller. This is ugly most likely due to my poor understanding of angular, so I apologize as this is most likely not the correct way to do this, but it solved my problem so I though I'd share.

Cheers,

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.