Angularjs jqlite append()和jquery append()的行为与

时间:2013-05-01 16:30:13

标签: jquery angularjs

我正在尝试将一些元素添加到a中,并且在使用内置jqlite vs使用jquery时我看到了一些不同的行为。我创造了一个小提琴,以展示其中的差异:http://jsfiddle.net/waylon999/5fyBt/1/

看起来像我一样:

element.append('<td>Val 1</td><td>Val 2</td>'); // jqlite

在插入字符串之前剥离标记。但是当我尝试

$(element).append('<td>Val 1</td><td>Val 2</td>'); 

它按照我的预期工作,其中附加的整个字符串arg附加到标记。我尝试了几件事,包括

angular.element(element).append(....)

但我无法找到让它发挥作用的方法。有什么我不明白它应该如何运作?

谢谢!

2 个答案:

答案 0 :(得分:4)

我可以说,它是JQLite中的一个错误:

function JQLite(element) {

    ...

    if (isString(element)) {
        var div = document.createElement('div');
        // Read about the NoScope elements here:
        // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
        div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work!
        div.removeChild(div.firstChild); // remove the superfluous div
        JQLiteAddNodes(this, div.childNodes);
        this.remove(); // detach the elements from the temporary DOM div.
    } else {
        JQLiteAddNodes(this, element);
    }
}

您可能知道或不知道,但您不能这样做:

div.innerHTML = '<div></div><td>asdf</td>';

td将被删除。我猜jQuery并没有做同样的事情(也许他们并不关心NoScope?)。也就是说,如果你想继续使用Angular,这很好用:

element[0].innerHTML += '<td>Val 1xx</td><td>Val 2yy</td>'; 

我建议在Angular&#39; github上提交一个问题。

答案 1 :(得分:0)

另一种解决方案是:

    var cells = angular.element('<table><tbody><tr>' +
                                '<td>Val 1</td><td>Val 2</td>' +
                                '</tr></tbody></table>').children().children().children();
    element.append(cells);

那里很难看,但我想你可以把它包装在一个实用功能中。

可能最好的解决方案就是删除 IE疯狂行。

http://jsfiddle.net/5fyBt/2/