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

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

最佳答案

在这里回答:

这是一个多方面的问题。首先,所有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在元素的PARENT上具有事件,因此,如果子元素发生更改,它将仍然有效:
$('.myDiv').on("click", ".myDynamicDiv", function(e){
      $(this).slideToggle(500);
      $scope.$apply(function(){
           $scope.myAngularVariable = !$scope.myAngularVariable;
      });
});

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

希望这可以帮助!
基督教

10-05 20:50
查看更多