jQuery 和 AngularJS:绑定事件以更改 DOM [英] jQuery and AngularJS: Bind Events to Changing DOM

问题描述

在我的 AngularJS DOM 中，我在 ng-repeat 指令中使用了 ng-include.它正在加载 HTML 就好了.无论如何，我遇到的一个问题是，我正在使用 JQuery(最新版本)在 DOM 中的元素上绑定一些鼠标悬停和鼠标单击事件，这些事件与通过 ng-repeat 和 include 添加到 DOM 中的类相同.不过，JQuery 似乎并未将事件处理程序应用于新的 DOM 添加.

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

解决方案

在这里回答:

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

jQuery(selector).someEvent(function(){$scope.$apply(function(){//在 angular 应用程序上执行任何模型更改或方法调用.});});

在最新版本的 jQuery 中，为了让事件根据 DOM 更改而更新，您需要 1. 获取最近父元素的选择器(例如):

<div class="myDynamicDiv">
<!-- 预计这里将添加更多myDynamicDiv"-->

在这种情况下，您的父选择器将是.myDiv"，而您的子选择器将是 .myDynamicDiv.

因此，您希望 jQuery 在元素的 PARENT 上设置事件，这样如果子元素发生变化，它仍然可以工作:

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

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

希望这有帮助！克里斯蒂安

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.

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?

解决方案

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(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):

<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.

Thus, you want jQuery to have the events on the PARENT of the element so if the child elements change, it will still work:

$('.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.

Hope this helps! Christian

这篇关于jQuery 和 AngularJS:绑定事件以更改 DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！