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

Question

在我在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):

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

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

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

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

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

希望这可以帮助!基督教