jQuery和AngularJS：将事件绑定到更改DOM

在AngularJS的DOM中，我在ng-repeat指令中使用了ng-include。 它正在加载HTML就好了。 无论如何，我遇到的一个问题是我正在使用JQuery（最新版本）来绑定DOM上的元素上的鼠标点击事件和与ng-repeat和include添加到DOM的类相同的类。 但是，JQuery似乎并没有将事件处理程序应用于新的DOM添加。

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

Answer 1

在这里回答：

这是一个多方面的问题。 首先，所有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.获取最近父元素的选择器（ex）：

在这种情况下，您的父选择器将是“.myDiv”，您的子选择器将是.myDynamicDiv。

因此，您希望jQuery在元素的PARENT上拥有事件，因此如果子元素发生更改，它仍然可以工作：

 $('.myDiv').on("click", ".myDynamicDiv", function(e){ $(this).slideToggle(500); $scope.$apply(function(){ $scope.myAngularVariable = !$scope.myAngularVariable; }); }); 

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

希望这可以帮助！ 基督教

Answer 2

免责声明：我一直在学习角度，所以这些基本上只是半教育的猜测。

首先，考虑使用Bertrand和Mark所述的角度指令。

其次，确保在角度之前加载jquery，请参见此处 。

第三，它可能是（动态）绑定问题，请参见此处 。

请反馈。

Answer 3

克里斯蒂安·斯图尔特已经很好地回答了这个问题，但我只想在他的回答中加入一些内容。

我使用以下代码，并将“ 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自己的按钮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); }