Binding click event to child element inside direct

Question

I have following directive.

(function () {
    'use strict';
    angular.module('ap.App')
        .directive('clearCancelFinishButtonsHtml', function () {
            return {
                scope: {
                    clearFunction: '='
                },
                replace: true,
                templateUrl: 'directives/clearCancelFinishButtons.html',
                link: function (scope, el, attrs) {
                    var clear= angular.element(el.find('button.clear'));
                    console.log(el.find('.clear'));
                    clear.bind("click", function () {
                        alert("here");
                    });
                }
            }
        });
})();

and it is pointing to the html file as follows

<div class="row pull-right">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <button type="button" class="custom-default clear">CLEAR</button>
        <button type="button" class="custom-danger">CANCEL</button>
        <button type="button" class="custom-info" ng-click="ap.save()">FINISH</button>
    </div>
</div>

What I wanted to do is grab the button with clear class inside the directive and pass a click event to it. For some reason, click event to element itself seems to work but I couldn't get the hold of child element to bind it. Any help will be much appreciated.

PS. I am using the directive as <clear-cancel-finish-buttons-html id="{{$id}}" clear-function="'resetConfigurationPageInputs'"> </clear-cancel-finish-buttons-html>

UPDATE----------

I wanted this to happen as I want to be able to dynamically add and remove function from the directive declaration itself.

Answer 1

Thank you all for trying,

I got it working with the following code.

(function () {
    'use strict';
    angular.module('ap.App')
        .directive('clearCancelFinishButtonsHtml', function () {
            return {
                scope: {
                    clearFunction: '='
                },
                replace: true,
                templateUrl: 'directives/clearCancelFinishButtons.html',
                link: function (scope, el, attrs) {
                    var buttons=el.find('button');
                    angular.forEach(buttons, function(button){
                        var buttonEl=angular.element(button);
                        if(buttonEl.hasClass("clear")){
                            buttonEl.bind("click", function () {
                              alert("here");
                          });
                        }
                    })

                }
            }
        });
})();

Happy coding ;)

Answer 2

why are you not using ng-click?

if you do this

link: function (scope, el, attrs) {
  scope.clearClick = function () { alert('click') };
}

and

<button type="button" class="custom-default clear" ng-click="clearClick()">CLEAR</button>

then it calls the function

Answer 3

are you using jquery? because if not then the .find() method will only work with tag names (so class selectors won't work). So the problem here is that el.find('.clear') isn't getting your child element. Instead, use document.querySelector like this:

var clear= angular.element(el[0].querySelector('button.clear'));

If you're not including jquery in your project then you only have access to jqlite. You can see what can and can't be done with it in the jqlite docs.