AngularJS directive with isolate scope: passing params in a function

Question

I want to use &attr in the scope option in order to expose an API for outside controllers.

This is the way i'm currently use: example

The problem is that i can only pass params inside an object, which forces the function binding to have one specific key (in the linking example, test inside hideDialog(test) is asked because i need it as key in the call close({'test':'Letho'})).

Is there any way that can omit the key when binding? So that i can directly use:

<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog">
  Check out the contents, {{name}}!
</my-dialog>

and

<a href class="close" ng-click="close('Letho')">&times;</a>

Thanks.

I don't think you can do that, but you can pass an object back to the method instead of sending just a string, if you want to call with multiple arguments {'test':{param1:'',param2:''}} — Chandermani
– Chandermani, Commented Jun 5, 2014 at 8:23
@Chandermani Thanks for the comment. I just thinks that asking the binding to add an undeclared key 'test' looking like a bad code smell. — xi.lin
– xi.lin, Commented Jun 5, 2014 at 8:35
Can you expand further on how you want it to work? What do you want to be able to pass to hideDialog() in the markup, and what do you want to receive in the controller? Just trying to make sure I understand the use case. — tasseKATT
– tasseKATT, Commented Jun 5, 2014 at 9:00
@tasseKATT I've update my question. Is it clear now? I just want a clean way to bind function. — xi.lin
– xi.lin, Commented Jun 5, 2014 at 9:18
So you don't want the user of the my-dialog directive to specify what to pass to hideDialog, but want it specified from the template? — tasseKATT
– tasseKATT, Commented Jun 5, 2014 at 11:00

tasseKATT · Accepted Answer · 2014-06-05 11:30:17Z

2

Directive usage:

<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog">

Directive:

scope: {
  'onClose': '&'
},
templateUrl: 'my-dialog-close.html',
link: function (scope) {

  scope.close = function (value) {
    var expressionHandler = scope.onClose();
    expressionHandler(value);
  };
}

Directive template:

<a href class="close" ng-click="close('Letho')">&times;</a>

Demo: http://plnkr.co/edit/2pxIHoTAP1OeAhmhA9ow?p=preview

answered Jun 5, 2014 at 11:30

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

1 Comment

xi.lin Over a year ago

It works! Thanks! May i ask what's the meaning of the method onClose? How it works?

Collectives™ on Stack Overflow

AngularJS directive with isolate scope: passing params in a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related