Javascript 将单击事件绑定到AngularJS指令内的子元素

我有以下指示

(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");
                    });
                }
            }
        });
})();

它指向html文件，如下所示

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

清楚的
取消
完成

我想做的是抓住指令中带有

clear

class的按钮，并向其传递一个click事件。出于某种原因，单击事件到元素本身似乎可以工作，但我无法获得子元素来绑定它。任何帮助都将不胜感激

附言。 我使用指令作为

更新----------

---

我希望这样做，因为我希望能够从指令声明本身动态添加和删除函数。

为什么不使用ng click

如果你这样做

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

及

清除

---

然后它调用函数

您在使用jquery吗？因为如果没有，那么

.find（）

方法将只对标记名起作用（因此类选择器不起作用）。所以这里的问题是，

el.find（'.clear'）

没有获取子元素。相反，请像这样使用

document.querySelector

：

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

---

如果您的项目中没有包含jquery，那么您只能访问jqlite。您可以在中看到它可以做什么和不能做什么。

谢谢大家的尝试

我让它与以下代码一起工作

(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");
                          });
                        }
                    })

                }
            }
        });
})();

---

快乐编码；）

我希望能够从指令声明本身中动态添加和删除函数。好吧，这会选择整个页面的“button.clear”，我只想选择特定指令的子级。通常无法将函数绑定到以这种方式选择的元素。谢谢你的帮助，伙计！啊，好吧，那是我的错，我没有意识到你在使用

bind（）

方法，它必须用

on（）

方法来代替。

bind（）

被弃用，应该用

on（）

来代替。看见

(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");
                          });
                        }
                    })

                }
            }
        });
})();