javascript - 通过 jQuery 将事件附加到 Angular 元素

Question

我正在开发一个 AngularJS 网站，我们也运行完整的 jQuery 库。

在此站点中，我的页面上有一个元素:

<a href="javascript:void(0)" ng-click="refresh()" title="Refresh">Refresh</a>

如果我打开 JavaScript 控制台并输入:

$('a[title="Refresh"]').click(function() {
    alert("click");
});

我第一次点击链接时看到“点击”警报。但是，当我第二次单击该链接时，我没有收到“单击”警报。

此外，如果我在控制台中输入以下内容，而不是 $('a[title="Refresh"]').click(...):

$('body').on('click', 'a[title="Refresh"]', function () {
    alert("live click");
});

我根本没有看到“实时点击”提醒。

这是怎么回事？为什么我的 $('body').on('click'... 不提醒“实时点击”？我需要使用 $('body').on( 'click'... 因为在添加“click”处理程序的代码触发时，页面上的 DOM 元素(即刷新链接)不存在。

是否有一种命令式的方法可以在 Angular 中完成 jQuery“实时”事件处理程序——一种非声明性的方法(除了将我的事件处理程序代码添加到范围的 refresh() 中，该代码通过ng-click？

Answer 1

您需要在指令中添加事件

<a href="javascript:void(0)" title="Refresh" refresh>Refresh</a>

app.directive('refresh',function() {
    return {
        restrict: 'A',
        link: function(scope,element,attr) {
            element.on('click',function() {
                alert("live click");
            });
        }
    }
});