ng-click attribute on angularjs directive

Question

I think it should be easy to use the well known angular attributes on a directive out of the box.

For example if the name of my directive is myDirective I would like to use it this way:

<div ng-controller="myController">
   <my-directive ng-click="doSomething()"><my-directive>
</div>

instead of needing to define a custom click attribute (onClick) as in the example below

<div ng-controller="myController">
   <my-directive on-click="doSomething()"><my-directive>
</div>

It seems that ng-click can work, but then you need to specify ng-controller on the directive tag too which I don't want. I want to define the controller on a surrounding div

Is it possible to use ng-click on a directive together with a controller defined on a parent html element?

score 34 · Accepted Answer · edited Sep 11 '13 at 14:13

34

Here is updated code. Maybe is this what you were looking for.

Html:

<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
        <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
    </div>
</div>

Angular:

var app = angular.module('myApp', []);

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            eventHandler: '&ngClick'
        },
        template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
    };
});

app.controller('MyController', ['$scope', function($scope) {
    $scope.myFirstFunction = function(msg) {
         alert(msg + '!!! first function call!');   
    };
    $scope.mySecondFunction = function(msg) {
         alert(msg + '!!! second function call!');   
    };
}]);

Edit

Check solution that I made in jsFiddler is that what you were looking for?

http://jsfiddle.net/migontech/3QRDt/1/

edited Sep 11 '13 at 14:13

Joe

46,419
33
155
245

answered Mar 25 '13 at 11:41

migontech

1,540
13
17

It doesn't seem to work... - I still need to provide the ng-controller on my directive – Glenn Dejaeger Mar 26 '13 at 12:20
So you want a function 'doSomthing()' not to be in controller but in your directive? – migontech Mar 26 '13 at 12:25
I want something like this: `

` At this moment I can only achieve this by binding a specific click attribute: `app.directive('myDirective', function(){ return { scope: { onClick:'&' } }; });` `` – Glenn Dejaeger Mar 26 '13 at 12:42
1

I'm a little concerned that this may not be the correct "Angular" way to do this... – wmitchell Jul 11 '13 at 00:30
In AngularJS 1.2 this example now works out of the box without the need for the "eventHandler" business. – Carl Sharman Feb 12 '14 at 11:26
Carl, I agree but not all users can update to latest versions :) – migontech Feb 12 '14 at 14:34
This helped me to understand how directives works. Thank you. But I'm stuck on this case: My directive contains 2 buttons to call to separate functions, as opposite as the jsFiddler case where two directives are calling a single function. Maybe its' the limit of the solution. – Max Apr 08 '20 at 10:36

ng-click attribute on angularjs directive

1 Answers1

Linked