javascript - Angular 在 IE 中抛出 "Error: Invalid argument."

Question

我有一个指令，它接受元素的文本并放置 wbr每 10 个字符后的元素。例如，我在具有长文本(例如 URL)的表格单元格上使用它，因此它不会跨越表格。指令代码:

myApp.directive('myWbr', function ($interpolate) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // get the interpolated text of HTML element
            var expression = $interpolate(element.text());

            // get new text, which has <wbr> element on every 10th position
            var addWbr = function (inputText) {
                var newText = '';
                for (var i = 0; i < inputText.length; i++) {
                    if ((i !== 0) && (i % 10 === 0)) newText += '<wbr>'; // no end tag
                    newText += inputText[i];
                }
                return newText;
            };

            scope.$watch(function (scope) {
                // replace element's content with the new one, which contains <wbr>s
                element.html(addWbr(expression(scope)));
            });
        }
    };
});

除了在 IE 中工作正常(我已经尝试过 IE8 和 IE9)，它向控制台抛出一个错误:Error: Invalid argument.

这里是 jsFiddle ，当点击按钮时，您可以在控制台中看到错误。

如此明显的问题:为什么错误在那里，它的来源是什么，为什么只在 IE 中？

(奖励问题:我怎样才能让 IE 开发工具告诉我更多关于错误的信息，比如源代码中的那一行，因为我花了一些时间才找到它，错误:参数无效。并没有透露太多关于起源的信息。)

P.S.:我知道 IE 根本不知道 wbr，但这不是问题。

编辑:在我的真实应用程序中，我重写了指令，不查看元素的文本并修改它，而是通过属性传递输入文本，现在在所有浏览器中都可以正常工作.但我仍然很好奇为什么原来的解决方案在 IE 中给出了那个错误，从而开始了赏金。

Answer 1

您尝试创建一个指令以将元素注入(inject)您的字符串会遇到 IE 处理中的一个已知错误 appendChild方法。即使在删除 <div> 之后，我也能够用你的 fiddle 重现你的错误 IE完全附加。

请注意，如果您删除 div完全串联，并尝试返回 newText以原始形式，你仍然得到

Error: Invalid argument.

Transclusion on UI view not working on IE9-10-11