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

Question

我有以下指示。

(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 的按钮，然后将点击事件传递给它。出于某种原因，元素本身的单击事件似乎有效，但我无法控制子元素来绑定它。任何帮助将不胜感激。

PS。我正在使用指令作为 <clear-cancel-finish-buttons-html id="{{$id}}" clear-function="'resetConfigurationPageInputs'"> </clear-cancel-finish-buttons-html>

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

我希望发生这种情况，因为我希望能够从指令声明本身动态添加和删除函数。

Answer 1

你为什么不使用 ng-click？

如果你这样做

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

和

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

然后调用函数

Answer 2

您在使用 jquery 吗？因为如果不是，那么 .find() 方法将仅适用于标签名称（因此 class 选择器将不起作用）。所以这里的问题是 el.find('.clear') 没有得到你的子元素。相反，像这样使用 document.querySelector：

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

如果您的项目中没有包含 jquery，那么您只能访问 jqlite。您可以在 jqlite docs.

中查看可以使用它做什么和不能做什么

Answer 3

谢谢大家的尝试，

我用下面的代码得到了它。

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

                }
            }
        });
})();

编码愉快 ;)

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

Binding click event to child element inside directive of AngularJS

javascript

angularjs

jqlite