Gaurav Rathor Gaurav Rathor - 6 months ago 33
AngularJS Question

Pass value from one directive to another using function binding '&'

I want to pass a value from a parent directive to child directive. In this scenario parent directive has a function which needs to be executed on click on child directive's div and pass ng-model value from child directive to parent directive's calling function.

var myApp = angular.module('myApp', []);
myApp.directive('parentDirective', function() {
return {
restrict: 'EA',
transclude: true,
template: '<div>Parent directive</div>',
link: function(scope) {
scope.someFunc = function(value) {
myApp.directive('childDirective', function() {
return {
restrict: 'EA',
template: '<input type="text" ng-model=""><button ng-click="issue(">Child Directive</button>',
scope: {
issue: '&'

<div ng-app="myApp">
<parent-directive ng-transclude>
<child-directive issue="someFunc()"></child-directive>

JSfiddle link


I have updated your JSFiddle with the right solution.

You need to specify the parameters when you bind the function in your parent directive.

<child-directive issue="someFunc(value)"></child-directive>

And pass an object with those parameters as keys in your child directive.

<button ng-click="issue({ value: })">Child Directive</button>