ng-repeat 排序在 jQuery 中引发异常 [英] ng-repeat sorting is throwing an exception in jQuery

问题描述

我有一个表，其中包含由 ng-repeat 创建的行.表头有一个 ng-click，用于设置排序的谓词(该函数还确定方向，asc/desc).排序工作正常，但由于某种原因，每次更改谓词和排序触发时，我都会从 jQuery 收到异常.

I have a table with rows created by ng-repeat. Table headers have an ng-click that sets the predicate for the sorting (the function also determines direction, asc/desc). The sorting works fine, but for some reason I get exceptions from jQuery every time I change the predicate and the sort fires.

这是我正在做的 plunkr 示例:http://plnkr.co/edit/qfNcm9RPQSsNgqmm3TYS?p=预览

Here is a plunkr example of what I am doing : http://plnkr.co/edit/qfNcm9RPQSsNgqmm3TYS?p=preview

正如您在 plnkr 中看到的，ng-repeat 非常简单.我们项目中的 ng-repeat 是类似的，没有更复杂的.

As you can see in the plnkr, the ng-repeat is pretty simple. The ng-repeat in our project is similar and not any more complicated.

<tr ng-repeat="contest in AllContests | orderBy:sort:ReverseSort" ng-show="contest.isVisible">

这实际上发生在我们代码中的许多地方，我们在它们之间使用了不同的排序方法，但它们仍然受到影响.

This actually happens in a number of places in our code and we use different methods of sorting among them, but they are still affected.

可以单击表格标题对项目进行排序.那个 plunkr 没有出现这个问题.即使排序在我的页面上有效，它也会破坏页面上的其他内容(例如 slick carousel 控件).例外是 jquery.js 中的第 1430 行(通过 Google CDN 发布的 2.1.1 版，其中包括 Sizzle.js).发生异常的方法是Sizzle.attr.看起来正在发生的事情是它正在循环使用 ng-repeat 创建的所有元素，并从中获取属性值.当它到达结束 ngRepeat:AllContests 中的比赛 | orderBy:sort:ReverseSort"注释时会发生异常，该注释表示 ng-repeat 部分的结束.

The table headers can be clicked to sort the items. That plunkr does not exhibit the problem. Even though the sorting works on my page, it breaks other things on the page (like a slick carousel control). The exception is on line 1430 in jquery.js (ver 2.1.1 via Google CDN which includes Sizzle.js). The method in which the exception happens is Sizzle.attr. It looks like what is happening is it is looping through all of the elements created with the ng-repeat, and getting attribute values from them. The exception happens when it gets to the " end ngRepeat: contest in AllContests | orderBy:sort:ReverseSort " comment that signifies the end of the ng-repeat section.

特别是当它尝试在元素上执行 getAttribute() 时，我收到未捕获的类型错误:未定义不是函数".

Specifically I am getting 'Uncaught TypeError: undefined is not a function' when it tries to getAttribute() on the element.

return val !== undefined ?
    val :
    support.attributes || !documentIsHTML ?
        elem.getAttribute( name ) :
        (val = elem.getAttributeNode(name)) && val.specified ?
            val.value :
            null;

现在，我可以拉取 jquery，将其添加到我的项目中，对其进行编辑，使其评估 elem.nodeName == "#comment"，并且在这种情况下只返回 null.我更想知道我是否做错了什么，或者是否有更好的方法来做这件事.

Now, I could pull jquery, add it to my project edit it so that it evaluates elem.nodeName == "#comment", and just return null in that case. I would much rather know if I am doing something incorrectly or if there is a better way of doing this.

否则，有没有一种方法可以在不编辑 jquery 库的情况下覆盖该方法并提供我自己的方法?

Otherwise, is there a way of overriding that method and supplying my own without editing the jquery library?

以下是实际问题的示例:https://playmlf.com/Lobby/ContestLobby

Here is an example of the problem in action: https://playmlf.com/Lobby/ContestLobby

我已经编辑了 jQuery 库，使其看起来如此:

I have edited the jQuery library so that it looks thusly:

Sizzle.attr = function (elem, name) {
    if (elem.nodeName == '#comment') return null;
    // Set document vars if needed
    if ( ( elem.ownerDocument || elem ) !== document ) {
        setDocument( elem );
    }

注意:这只是 Sizzle.attr 方法的顶部部分.第一个 if 是感兴趣的行.如果元素是注释，则返回 null.我不想编辑 jquery 库，但我无法弄清楚如何覆盖这个特定的方法，或者在排序过程中首先不调用它.我不喜欢这个修复，但同时我在这上面花了太多时间，需要一些有用的东西.稍后我将支付不良修复税.

NOTE: this is only the top portion of the Sizzle.attr method. The first if is the line of interest. It returns null if the element is a comment. I did not want to edit the jquery library, but I was unable to figure out how to override this particular method, or keep it from being called in the first place during a sort. I don't like this fix, but at the same time I have spent WAY too much time on this and need something that works. I will pay the bad fix tax later.

推荐答案

出现这种情况似乎是因为 Comment 元素没有 getAttribute 方法.

This seems to occur because Comment element does not have getAttribute method.

为此记录了一个错误.作为一种解决方法，您可以将其添加到您的代码库中，并确保它尽早执行:

There is a bug logged for this. As a workaround, you can add this to your codebase and make sure that it gets executed early on:

Object.getPrototypeOf(document.createComment('')).getAttribute = function() {}

这篇关于ng-repeat 排序在 jQuery 中引发异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！