Get return value in callback Angular js Directive

Question

I have created one directive in Angularjs in which I need to use callBackMethod, so that I can call Controller's Function.

Controller's function is called.But Controller's Function is returning some value.I want to get that value in callback function.How to achieve that?

Below is my code for Directive

.directive('abcOption', function($compile) {
return {
    restrict : 'A',
    template : '<div class="filter-content"></div>',
    replace : true,
    scope : {
            callBackMethod:'&getDisplayName'
    },link: function(scope,element,attrs)
    {
        scope.getDataName =function(dataId)
        {
            scope.callBackMethod(dataId);
        };
}
    };
});

Below Code is for Controller function

$scope.getDisplayName = function(columnName) {
return 'abc';
};

It's small snippet of the code. Controller function is called but I am not getting return value in directive function. I am getting undefined in console log if I log scope.callBackMethod(dataId);

How to get return value using callBackMethod in Directive?

AlwaysALearner · Accepted Answer · 2013-11-21 08:08:00Z

20

While calling the controller's function from inside a directive with an isolate scope, you need to pass an object:

HTML

<div ng-app="myApp" ng-controller="ctrl">
    <div abc-option get-display-name="getDisplayName(columnName)"></div>
</div>

JS

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.getDisplayName = function(columnName) {        
        return 'abc';
    };
}
app.directive('abcOption', function($compile,$timeout) {
    return {
        restrict : 'A',
        template : '<div class="filter-content">abc</div>',
        replace : true,
        scope : {
            callBackMethod:'&getDisplayName'
        },
        link: function(scope,element,attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({columnName:"hurray"}));           
        }
    };
});

Fiddle

edited Nov 21, 2013 at 8:08

answered Nov 21, 2013 at 8:02

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

1 Comment

Amicable Over a year ago

I find it really odd that the object property name must be the same as the variable called from the markup. Really threw me off.

Phung D. An · Accepted Answer · 2016-04-13 07:45:01Z

3

The answer from CodeHater works but is (just a little) confusing. So I updated it to make it easier to understand

HTML

<div ng-app="myApp" ng-controller="ctrl">
    {{returnVal}}
    <div abc-option callback="setDisplayNameFn(mustBeTheSame)"></div>
</div>

JS

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.setDisplayNameFn = function(whatever) {        
        $scope.returnVal=  whatever;
    };
}
app.directive('abcOption', function($compile,$timeout) {
    return {
        restrict : 'A',
        template : '<div class="filter-content"><b>directive html<b></div>',
        replace : true,
        scope : {
            callBackMethod:'&callback'
        },
        link: function(scope,element,attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({mustBeTheSame:"value from directive"}));           
        }
    };
});

updated fiddle

answered Apr 13, 2016 at 7:45

Phung D. An

2,6821 gold badge23 silver badges23 bronze badges

1 Comment

Phung D. An Over a year ago

@CanetRobern : ur welcome, glad there is still people using ng1 like me as of end of 2017. Cheers

Collectives™ on Stack Overflow

Get return value in callback Angular js Directive

2 Answers 2

HTML

JS

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JS

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related