0

当鼠标进入行时，我正在尝试在表格行上添加悬停效果。为此，我使用 JQuery 和 on() 方法。该表是使用 AngularJS 的 ng-repeat 创建的。

在 Firefox 上一切正常。当我进入该行时，例如颜色会发生变化。在 IE8 上，JQuery 无法使用 td 解析表行中的 AngularJS 属性。使用表格标题，它可以正常工作。

<table class="testClass" id="searchTextResults">
        <tr>
            <th ng-repeat="item in friends[0].Order">
                {{item}}
            </th>
        </tr>
        <tr ng-repeat="friend in friends | filter:searchText">
            <td ng-repeat="item in friend.Order">
                {{friend[item]}}
            </td>
        </tr>
    </table>

当我提醒它时，这是 IE8 中的 innerHTML 的内容：“ngRepeat: item infriend.Order”

我还尝试包含 JSON2.0 并尝试了 document.createElement() 解决方案，但没有任何效果。

这是小测试脚本：

$(document).ready(function () {
   $(".testClass tr").on("mouseenter mouseleave", function (event) {
       alert(this.innerHTML);
   });
});

有没有办法解决这个问题？

4

1 回答 1

0

所以你想在行上做一些效果或动画。您将使用指令而不是标准 jQuery 来执行此操作。当以 Angular 的方式做事时，dom 操作只能在指令中完成。

http://jsfiddle.net/engZB/

app.directive("animateHover", function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).on("mouseenter", function() {
                $(this).find("td").css("background-color","blue");
                //Anything you want to do with the elements here
            });
            $(element).on("mouseleave", function() {
                $(this).find("td").css("background-color","");
                //Anything you want to do with the elements here
            });
        }
    }
});

<tr ng-repeat="friend in friends | filter:searchText" animate-hover>
    <td ng-repeat="item in friend.Order">
        {{friend[item]}}
    </td>
</tr>
于 2013-07-26T12:39:39.383 回答