Gaurav Rathor Gaurav Rathor - 9 days ago 6
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.

http://jsfiddle.net/Lvc0u55v/12543/



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) {
alert(value);
}
}
}
});
myApp.directive('childDirective', function() {
return {
restrict: 'EA',
template: '<input type="text" ng-model="data.name"><button ng-click="issue(data.name)">Child Directive</button>',
scope: {
issue: '&'
}
}
});

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





JSfiddle link

Answer

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: data.name })">Child Directive</button>
Comments