Adding onclick function to div in Angular directive link

Question

I have an angular directive with a link scope.

In that scope, I append a div. I would like to add an event listener to this div.

When I do so, the event listener is overridden by the ng-click native attributes of the directive.

What is the best way forward? Trying to use element to identify the element does not work as element compiles asynchronously.

HankScorpio · Accepted Answer · 2015-03-03 20:12:32Z

1

Why not just use ng-click?

link: function(scope, element, attrs) {
    scope.onHandleClick = function() {
        console.log('onHandleClick');
    };
}

<div ng-click="onHandleClick($event)"/>

answered Mar 3, 2015 at 20:12

HankScorpio

3,65117 silver badges28 bronze badges

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

5 Comments

Because it's a child element within the div appended within the link scope.

It should still have visibility of this link scope.

$compile('<div class="childElement" ng-click="onHandleClick($event)">')(scope)

when I try your original post, the scope.onHandleClick function is not called; nothing happens.

Can we see your code where you create and append the div?