Binding click event to child element inside directive of AngularJS

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.

Dinesh Devkota · Accepted Answer · 2017-05-01 14:58:26Z

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 ;)

edited May 1, 2017 at 14:58

answered May 6, 2016 at 20:22

Dinesh Devkota

1,4172 gold badges18 silver badges46 bronze badges

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

1 Comment

Gucu112 Over a year ago

bind() is deprecated, on() should be used instead. See documentation.

damien · Accepted Answer · 2016-05-06 20:09:30Z

0

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

answered May 6, 2016 at 20:09

damien

233 bronze badges

1 Comment

Dinesh Devkota Over a year ago

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

Ahmed Wagdi · Accepted Answer · 2016-05-06 20:18:14Z

0

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.

edited May 6, 2016 at 20:18

answered May 6, 2016 at 20:10

Ahmed Wagdi

9345 silver badges9 bronze badges

3 Comments

Dinesh Devkota Over a year ago

Well, that selects the 'button.clear' of whole page, I just want to select the child of the specific directive.

Dinesh Devkota Over a year ago

Apararently couldn't bind function to element selected that way. Thanks for the help, man!

Ahmed Wagdi Over a year ago

Ahh ok that's my bad, didn't realize you were using the bind() method, it has to be done with the on() method instead.

Collectives™ on Stack Overflow

Binding click event to child element inside directive of AngularJS

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related