jQuery和AngularJS：将事件绑定到不断变化的DOM

在AngularJS中的DOM中，我在ng repeat指令中使用ng include。它正在加载HTML。无论如何，我遇到的一个问题是，我正在使用JQuery（最新版本）在DOM中的元素上绑定一些鼠标悬停和鼠标单击事件，这些事件与ng repeat and include添加到DOM中的事件具有相同的类。不过，JQuery似乎没有将事件处理程序应用于新添加的DOM

在以前的版本中，.live（）似乎满足了我的要求，但在最新版本中它已被删除。我是否应该清除元素上的绑定，并在每次DOM添加了类的其他元素时重新创建它们？

免责声明：我一直在学习angular，所以这些基本上只是半知性的猜测

首先，考虑使用贝特朗和马克所陈述的工作的角度指令。 其次，确保jquery在angular之前加载，请参阅

第三，这可能是一个（动态）约束问题，请参阅

请提供反馈。

在此处回答：

这是一个多方面的问题。首先，所有jQuery代码事件都应该使用$scope.$apply按预期执行angularjs代码。例如：

jQuery(selector).someEvent(function(){
    $scope.$apply(function(){
      // perform any model changes or method invocations here on angular app.
    });
});

在最新版本的jQuery中，为了使事件根据DOM更改进行更新，您需要1。为最近的父元素（例如）获取选择器：

请注意，$scope.$apply（）用于使jQuery能够访问这些角度变量

希望这有帮助！

---

克里斯汀

克里斯汀·斯图尔特已经很好地回答了这个问题，但我只是想补充一下他的回答

我使用以下代码，并将“

cssClickableIcon

”类添加到我的按钮中，这样当用户单击按钮（或

div

控件）时，它会稍微向内收缩

这是一个小小的调整，但在网页上有非常好的效果。你真的觉得网页更具交互性，而不是平面，并且你点击了控件

//  Make the buttons "bounce" when they're clicked on
$('body').on("mousedown", ".cssClickableIcon", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".cssClickableIcon", function (e) {
    $(this).css("transform", "");
});

因为它使用jQuery的

on

函数，所以它不使用按钮或由AngularJS

ng repeat

命令创建的其他DOM元素

当然，如果您使用的是Bootstrap自己的button CSS类，您可以通过以下方式轻松地在所有Bootstrap/Angular按钮中添加此效果：

$('body').on("mousedown", ".btn", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".btn", function (e) {
    $(this).css("transform", "");
});

我非常喜欢这个效果，而且添加起来非常简单

更新

Christian Stewart建议使用CSS而不是jQuery，他完全正确

因此，您可以使用以下简单的CSS实现相同的效果：

.btn:active {
    transform: scale(0.9);
}

---

on（）不起作用？另外，我很想知道为什么你不使用鼠标移动和鼠标点击事件的角度等价物。这些等价物是什么？请注意我发布的答案！你是说$apply无处不在而不是$run？另外，一种更具角度的方法是编写一个指令来处理动画。指令的link函数可以绑定到click事件，也可以在模板中使用ng click。click事件处理程序将是一个$scope函数（在指令的控制器或链接函数中定义），用于执行动画和$scope属性更改。没错，您可以有一个指令，但是如果您想使用jQuery动态更新DOM元素（这正是这个问题的真正目的），您可以这样做。如果您也使用angular，则可以使用$scope.$run从jQuery中访问angular内容。@MarkRajcok它是$scope.$apply，顺便说一句，谢谢您提供了有关将事件绑定到父元素以监视子元素更改的提示！这对我的情况很有帮助，旧版本的应用程序使用原始jQuery进行绑定，现在我们逐渐引入angular来呈现页面。jQuery绑定是在angular呈现视图之前发生的，因此没有发生任何事情。您可以使用CSS选择器而不是缓慢的JavaScript来实现这一点。很好的提示！我没有意识到“：active”也会有同样的效果（并且仍然可以使用角度创建的DOM元素）。我已经更新了我的文章来展示如何做到这一点。非常感谢！！NP您会发现，任何CSS都可以与任何dom元素一起工作，无论它们是如何创建的：）

$('body').on("mousedown", ".btn", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".btn", function (e) {
    $(this).css("transform", "");
});

.btn:active {
    transform: scale(0.9);
}