jQuery 和 AngularJS：绑定事件以更改 DOM
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14659204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery and AngularJS: Bind Events to Changing DOM
提问by Christian Stewart
In my DOM in AngularJS, I am using an ng-include inside a ng-repeat directive. It is loading the HTML just fine. Anyway, an issue I have is that I'm using JQuery (latest version) to bind a few mouse over and mouse click events on elements in the DOM with the same class as those added to the DOM by the ng-repeat and include. JQuery doesn't seem to apply the event handlers to the new DOM addition, though.
在 AngularJS 的 DOM 中，我在 ng-repeat 指令中使用了 ng-include。它正在加载 HTML 就好了。无论如何，我遇到的一个问题是，我正在使用 JQuery（最新版本）在 DOM 中的元素上绑定一些鼠标悬停和鼠标单击事件，这些事件与通过 ng-repeat 添加到 DOM 的元素相同并包含。不过，JQuery 似乎没有将事件处理程序应用于新的 DOM 添加。
In previous versions .live() seemed to do what I want, but it has been removed in the latest version. Should I clear the bindings on the elements and re-create them every time the DOM has additional elements of the class added?
在以前的版本中 .live() 似乎可以做我想要的，但它已在最新版本中删除。每次 DOM 添加了该类的其他元素时，我是否应该清除元素上的绑定并重新创建它们？
回答by Christian Stewart
Answer here:
在这里回答：
This is a multifaceted question. First of all, all jQuery code events should use $scope.$apply to execute angularjs code as expected. Example:
这是一个多方面的问题。首先，所有 jQuery 代码事件都应该使用 $scope.$apply 来按预期执行 angularjs 代码。例子：
jQuery(selector).someEvent(function(){
$scope.$apply(function(){
// perform any model changes or method invocations here on angular app.
});
});
In the latest version of jQuery, in order to have events that update based on DOM changes, you want to 1. Get a selector for the nearest parent element (ex):
在最新版本的 jQuery 中，为了让事件根据 DOM 更改更新，您需要 1. 获取最近父元素的选择器（例如）：
<div class="myDiv">
<div class="myDynamicDiv">
</div>
<!-- Expect that more "myDynamicDiv" will be added here -->
</div>
In this case, your parent selector would be ".myDiv", and your child selector would be .myDynamicDiv.
在这种情况下，您的父选择器将是“.myDiv”，而您的子选择器将是 .myDynamicDiv。
Thus, you want jQuery to have the events on the PARENT of the element so if the child elements change, it will still work:
因此，您希望 jQuery 在元素的 PARENT 上具有事件，因此如果子元素发生更改，它仍然可以工作：
$('.myDiv').on("click", ".myDynamicDiv", function(e){
$(this).slideToggle(500);
$scope.$apply(function(){
$scope.myAngularVariable = !$scope.myAngularVariable;
});
});
Notice that the $scope.$apply() is used in order to enable jQuery to access those angular variables.
请注意， $scope.$apply() 用于使 jQuery 能够访问这些角度变量。
Hope this helps! Christian
希望这可以帮助！基督教
回答by linski
disclaimer: I have been learning angular myself so these are basically just half-educated guesses.
免责声明：我自己一直在学习 angular，所以这些基本上只是半途而废的猜测。
First, consider using angular directives for the job as stated by Bertrand and Mark.
首先，考虑使用 Bertrand 和 Mark 所述的工作的角度指令。
Second, make sure that jquery gets loaded before angular, see here.
其次，确保在 angular 之前加载 jquery，请参见此处。
Third, it might be a (dynamic) binding issue, see here.
第三，它可能是一个（动态）绑定问题，请参见此处。
Please, feedback.
请反馈。
回答by Mike Gledhill
This question has already been nicely answered by Christian Stewart, but I just wanted to add something to his response.
Christian Stewart 已经很好地回答了这个问题，但我只是想在他的回答中添加一些内容。
I use the following code, and add the "cssClickableIcon" class to my buttons, so that when the user clicks on a button (or a divcontrol), it shrinksinwards slightly.
我使用以下代码，并将“ cssClickableIcon”类添加到我的按钮中，这样当用户单击按钮（或div控件）时，它会稍微向内收缩。
It's a little tweak, but has a really nice effect on a webpage. You really feel as though the webpage is more interactive, rather than flat, and that you haveclicked on the control.
这是一个小小的调整，但在网页上有一个非常好的效果。你真的觉得网页更具交互性，而不是平面，并且你已经点击了控件。
// 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", "");
});
Because this uses jQuery's onfunction, this doeswork with buttons or other DOM elements created by an AngularJS ng-repeatcommand.
因为它使用了 jQuery 的on函数，所以它确实适用于由 AngularJSng-repeat命令创建的按钮或其他 DOM 元素。
And, of course, if you're using Bootstrap's own button CSS classes, you can easily add this effect across all of your Bootstrap/Angular buttons using this:
而且，当然，如果您使用 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", "");
});
I love this effect so much, and it's such a simple thing to add !
我非常喜欢这种效果，添加它是如此简单！
Update
更新
Christian Stewart suggested using CSS instead of jQuery, and he's absolutely right...
Christian Stewart 建议使用 CSS 而不是 jQuery，他是绝对正确的......
So, you can achieve the same effect using just this simple CSS:
所以，你可以使用这个简单的 CSS 来达到同样的效果：
.btn:active {
transform: scale(0.9);
}
