Binding click event to child element inside directive of AngularJS

问题

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.

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

回答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

回答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.

来源：https://stackoverflow.com/questions/37080400/binding-click-event-to-child-element-inside-directive-of-angularjs

标签

javascript

angularjs

jqlite