Angular在IE浏览器中抛出"Error: Invalid argument."错误。

Question

我有一个指令，它获取元素的文本并在每10个字符后放置wbr元素。我将其用于具有长文本（例如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开发工具告诉我更多关于错误的信息，比如源代码的行数，因为我花了一些时间才找到它，“Error: Invalid argument.”并没有提供太多关于错误来源的信息。）

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

编辑：在我的实际应用程序中，我已经重新编写了指令，不再查看元素的文本并修改该文本，而是通过属性传递输入文本，并且现在在所有浏览器中都可以正常工作。 但我仍然好奇为什么原始解决方案会在IE中出现错误，因此开始了悬赏。

- przno

---

jsFiddle在旧版IE中无法工作（至少是编辑器），所以我不确定您如何在IE 8中进行测试。尝试访问http://jsfiddle.net/5UZbk/1/show/（请注意，我在URL末尾添加了“show /”）-在我的IE 8中可以正常工作。 - Ian

在这里(http://www.w3schools.com/tags/tag_wbr.asp)说`<wbr>`在任何IE中都不被支持。可能是原因(或者可能不是，只是以防有用)。 - Nikos Paraskevopoulos

@Ian 我已经在IE8和IE9上测试了我的真实应用程序。我在其他浏览器中创建的jsFiddle在IE9中打开链接时可以正常工作（好吧，有我描述的错误）。 - przno

@NikosParaskevopoulos 不，那不是问题（我问题的最后一行）。 - przno

@NikosParaskevopoulos 抱歉，我在最后一行使用了错误的标记，所以它没有完全显示。 - przno

Answer 1

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

请注意，如果您完全删除您的 div 连接，并尝试以原始形式返回 newText，您仍会收到以下错误：

Error: Invalid argument.

在 IE9-10-11 上未能使用 UI 视图进行转换

- Dave Alperovich

---

这里是完全相同的代码，只是将<wbr>改为<div> - 在IE中仍会抛出错误。 - przno

@przno，这是一个已知的bug。在IE9-10-11上，如果您将一些HTML内容放入ui-view指令中，则该内容在第一次尝试时会正确显示，但是当您返回到相同状态时则无法正确显示。相同的代码在Firefox和Chrome上运行良好。 https://github.com/angular-ui/ui-router/issues/615 - Dave Alperovich

@DaveA请不要链接w3schools！它与W3C没有任何关联（您的链接是误导性的），而且经常是错误的，不准确的和过时的。有关更多信息，请参见w3fools。Mozilla开发者网络要好得多。 - Oriol

@Oriol，感谢提供链接。信息很有用且有趣。但请不要使用**!!!**来评论。这会给人一种印象，认为我的答案是错误或误导性的，而W3C链接只是我的答案的一个小部分。 - Dave Alperovich

Answer 2

我的代码中出现了"错误：无效参数匿名函数调用"的问题，是由于我在下面的代码中执行了以下操作。

错误信息：

<span data-ng-bind="name.first">{{name.first}}</span>

无错误：

<span data-ng-bind="name.first"></span>

- n3wbsauce

---

同样适用于ng-bind-html。 - ishayle

Answer 3

当我在HTML模板中遇到以下错误时，IE也会出现相同的错误：

<textarea disabled  [(ngModel)]="some.var">{{some.var}}</textarea>

禁用textarea在IE中不允许使用ngModel。

Chrome和FF没有抱怨，只有IE Edge。 检查模板也是一个好主意。

- oFace

---

请注意，此问题涉及AngularJS，而不是Angular 2+。 - Heretic Monkey

Answer 4

虽然这不是一个Angular的答案（而且我知道这是一个老问题），但我建议您可能正在错误地解决问题。而不是插入换行符（这将破坏字符串中的任何标记），只需使用CSS text-overflow或overflow属性即可。

- see sharper