在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 变量。
希望这可以帮助!
基督教