jQuery 和 AngularJS : Bind Events to Changing DOM

Question

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

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

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. 获取最近父元素(例如)的选择器:

<div class="myDiv">
<div class="myDynamicDiv">
</div>
<!-- Expect that more "myDynamicDiv" will be added here -->
</div>

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

因此，您希望 jQuery 在元素的父元素上发生事件，这样如果子元素发生更改，它仍然可以工作:

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

请注意，使用 $scope.$apply() 是为了使 jQuery 能够访问这些 Angular 变量。

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