implement AngularJS Directives

Question

currently I have developed my angularJS application without directives. This works fine but now I need my code at another place - therefore I will chance my code therefore that I can use my directives.

My application looks simular to this one:

My current application structure

<button type="button" ng-click="vm.buttonInDirectiveShouldInvokeControllerFunction()">First Testfunction</button>

No I have tried to use a directive here:

My application with a directive - does not work

<button type="button" ng-click="vm.functionOfControllerShouldBeInvoked()">First Testfunction</button>

My problem now is that I don't know how I can use some (e.g. 15) ng-click attributes in my directive in that way that different functions in my controller are invoked.

Thanks a lot for help!

Take online course for better understanding of angular, for example this one - lynda.com/AngularJS-tutorials/Up-Running-AngularJS/… — Vasyl, CommentedSep 25, 2015 at 7:03

Anand G · Accepted Answer · 2015-09-25 07:29:18Z

1

You only have to pass your onTest through to the directive, like this:

<my-customer customer="naomi" on-test="onTest"></my-customer>

and

//... scope: { customer: '=', onTest: '=' }, //...

or, alternatively if you want to allow general ng expressions:

<my-customer customer="naomi" on-test="onTest()"></my-customer>

and

//... scope: { customer: '=', onTest: '&' }, //...

Working fiddle : http://jsfiddle.net/8v9wf4ea/

edited Sep 25, 2015 at 7:29

Anand G

3,2102 gold badges24 silver badges29 bronze badges

answered Sep 25, 2015 at 6:47

Kevin Dreßler

4472 silver badges15 bronze badges

Thanks a lot - it works fine. I would have one more question: ** general ng expression ** is not clear for me - if I have onTest: '&' than alert isn't called. Would it be possible to change jsfiddle in that way to allow general ng expressions. Thanks for help!
– quma
CommentedSep 25, 2015 at 12:40
You have to change the fiddle accordingly to what i pointed out pretty clear in my answer. When you use "&", then whatever you write in the attribute gets wrapped in a function call, so instead of writing on-test="onTest", you need to actually call the function this time, as it becomes the new function body inside the expression wrapper. The only upside of this approach is that you can now write something like on-test="foo='bar'".
– Kevin Dreßler
CommentedSep 25, 2015 at 12:46

Add a comment |

Collectives™ on Stack Overflow

implement AngularJS Directives

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related