12

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

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

4

3 回答 3

31

在这里回答：

这是一个多方面的问题。首先，所有 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 能够访问这些角度变量。

希望这可以帮助！基督教

于 2013-02-04T20:44:38.363 回答
2

免责声明：我自己一直在学习角度，所以这些基本上只是半知半解的猜测。

首先，考虑使用 Bertrand 和 Mark 所述的工作角度指令。

其次，确保 jquery 在 angular 之前加载，请参见此处。

第三，这可能是一个（动态）绑定问题，请参见此处。

请反馈。

于 2013-02-02T11:28:04.127 回答
0

克里斯蒂安·斯图尔特（Christian Stewart）已经很好地回答了这个问题，但我只是想在他的回答中添加一些内容。

我使用以下代码，并将“ cssClickableIcon”类添加到我的按钮中，这样当用户单击按钮（或div控件）时，它会稍微向内 收缩。

在此处输入图像描述

这是一个小小的调整，但对网页的效果非常好。你真的觉得网页更具交互性，而不是平面，并且你点击了控件。

//  Make the buttons "bounce" when they're clicked on
$('body').on("mousedown", ".cssClickableIcon", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".cssClickableIcon", function (e) {
    $(this).css("transform", "");
});

因为这使用了 jQuery 的on函数，所以它确实ng-repeat适用于由 AngularJS命令创建的按钮或其他 DOM 元素。

当然，如果您使用的是 Bootstrap 自己的按钮 CSS 类，您可以使用以下命令轻松地在所有 Bootstrap/Angular 按钮中添加此效果：

$('body').on("mousedown", ".btn", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".btn", function (e) {
    $(this).css("transform", "");
});

我非常喜欢这种效果，而且添加起来非常简单！

更新

Christian Stewart 建议使用 CSS 而不是 jQuery，他是绝对正确的......

因此，您可以使用这个简单的 CSS 来实现相同的效果：

.btn:active {
    transform: scale(0.9);
}
于 2017-02-03T09:56:01.310 回答