Pass Arguments from directive to controller function

Question

I've seen lots of these questions but haven't found a solution that works. here is a fiddle that doesn't work but should.

http://jsfiddle.net/cdparmeter/j2K7N/2/

Controller:

$scope.foo = function (textArray) { console.log(textArray) };

Directive:

return { restrict: 'E', replace: 'true', scope: { methodToCall: '&method' }, template: "<div> <input ng-model='textToPush'/> <button ng-click='pushText'>Push</button> <button ng-click='finish'>Finish</button> </div>", link: function (scope, element, attrs) { scope.paragraphs = []; scope.pushText = function () { scope.paragraphs.push(scope.pushText); scope.pushText = ""; } scope.finish = function () { scope.methodToCall(scope.paragraphs) } } }

HTML:

<div ng-app="MyApp"> <div ng-controller="MyController"> <container data-method="foo"> </div> </div>

I'm building an array inside my directive that needs custom handling in the controller of the parent scope. I know I can throw a watch in the parent scope on a model I pass into my directive but that seems hackish and dirty. any suggestions?

Michael Benford · Accepted Answer · 2013-11-05 01:08:38Z

Before answering your question I must say that your script contains a few errors:

You're binding the input to a variable called textToPush, and then using a different one inside the pushText function (pushText);
You're not setting the ng-click directive correctly; it should be ng-click="pushText()" instead of ng-click="pushText". The same for finish;

Now, back to your question. In order to call a function of the parent scope passing arguments, you can get a reference to that function first, and then execute it:

scope.finish = function () { var func = scope.methodToCall(); func(scope.paragraphs); }

Here's a working version of your script.

You could also do this, if you prefer:

scope.finish = function () { scope.methodToCall({value: scope.paragraphs}); }

But for this code to work you should change your markup to:

<container data-method="foo(value)"/>

Here's another jsFiddle showing the solution above.

Collectives™ on Stack Overflow

Pass Arguments from directive to controller function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related