Angularjs How to pass parameter back to controller from directive with ng-click

Question

I have a directive that handles the comments process. I'm binding it to a parent Controller, as followings:

<div commentable signin="signIn()"</div>

In the comment template I have multiple signin provider buttons; therefore I need to pass the provider back to the parent Controller. But doing this gives me undefined.

Here is the button in the directive:

<button type="button" ng-click="signin('app')">Sign In</button>

Here is the Controller function:

$scope.signIn = function (provider) {
     console.log('clicked signin ' + provider);         
}

How do can I bind the provider string from the ng-click to Ctrl's provider in the function?

Think you might be looking for "=" in your isolate scope for the directive like scope: {signIn:"="} so the function that's passed in is called... not sure though showing the directive may help. — shaunhusain
– shaunhusain, Commented Oct 21, 2013 at 1:42

KayakDave · Accepted Answer · 2013-10-20 23:24:16Z

2

What you have should work. Make sure signIn() is declared within your controller though. As such:

 function YourController($scope) {  
     $scope.signIn = function (provider) {
        console.log('clicked signin ' + provider);         
 }}

Assuming your button lives in the controller as such:

 <div ng-controller="YourController">    
     <button type="button" ng-click="signIn('test')">Sign In</button>
 </div>

Here's a fiddle of this working: http://jsfiddle.net/tAsgt/

edited Oct 20, 2013 at 23:24

answered Oct 20, 2013 at 23:15

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

5 Comments

julie-coderiver Over a year ago

it's weird. I'm getting the following in the console: clicked signin undefined. So the two are wired up, but for some reason the provider 'test' is not passing through from the button to the controller.

julie-coderiver Over a year ago

Actually it's showing in the console: clicked signin provider. Hum.

KayakDave Over a year ago

Odd. I just updated that fiddle so it has two buttons and the result of the click is shown next to "result:". Have a look and see if the buttons work for you.

julie-coderiver Over a year ago

Yes the jsfiddle works. However, remember I'm passing this through a directive first. I think the issue resides in the directive where I'm passing signin="signIn()". BTW I had 'provider' in signin="signIn('provider')"; removing that, it's back to showing undefined again.

KayakDave Over a year ago

Could you mock up a fiddle showing how you have it set up? With the directive? Then we'll be sure we all are on the same page.

Collectives™ on Stack Overflow

Angularjs How to pass parameter back to controller from directive with ng-click

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related