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!

Answer 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/