在 class 的 Angular JS 指令中使用 ng-repeat 创建的 jQuery 到 select 元素？

Question

我查看了 Angular 站点 here 上的文档，但我仍然有点困惑。

我有一个 angular 指令，它的模板包含由 ng-repeat 创建的元素。这些元素中的每一个都有一个共同的class。我正在尝试通过 class select 这些元素，以便在属于 class 的元素上触发事件时我可以传递处理程序。

据我从答案 here 可以看出，我可以选择 select 使用 jqLite 或 angular.element() 对这些元素进行处理。我的 jQuery 在包含 Angular 之后包含在内。我认为这应该以这种方式完成，因为我想 select 特定 class 的元素在 Angular 通过我的指令生成它们之后。

我实际上并没有尝试在 class 上使用 .click() 事件，这只是一个概念验证。我在与指令的包含元素关联的控制器中有以下代码：

$(".gallery-image").click(function(){
        alert("test");
});

我想做的应该很明显，我只是不确定如何处理 Angular 和 jQuery 的混合物。

如何在这些元素上 select 和运行一个带有 jQuery 的事件处理程序？

Answer 1

这样使用

$(document).on("click", ".gallery-image", function(){
        alert("test");
});

您不能直接在 ".gallery-image" 上 select，因为当您将点击事件绑定到它们时，页面上有 none 个

但是您始终可以对 ng-repeat 中的项目使用 ng-click 指令，您不需要使用 jQuery 来绑定点击事件。

Answer 2

如果在 Angular 之后加载 jQuery，angular.element 将保留为 jQuery 的简化版本：jqLite。

To use jQuery, simply ensure it is loaded before the angular.js file.

所以你需要先加载jQuery。您可以通过 angular.element === jQuery.

在控制台上查看

如果包含ng-repeat，总是使用$timeout等待渲染完成。然后就可以访问元素了。

当然，只要有可能，总是使用 ng-click 而不是 .on('click',...。

在 class 的 Angular JS 指令中使用 ng-repeat 创建的 jQuery 到 select 元素？

Using jQuery to select element created by ng-repeat in Angular JS directive by class?

jquery

angularjs

events

angularjs-directive

traversal