Angular 抛出“错误：无效参数”。在 IE 中答案

【问题标题】：Angular throws "Error: Invalid argument." in IEAngular 抛出“错误：无效参数”。在 IE 中
【发布时间】：2014-05-27 14:24:53
【问题描述】：

我有一个指令，它获取元素的文本并在每 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 中给出该错误，从而开始赏金。

【问题讨论】：

jsFiddle 在旧的 IE（至少是编辑器）中不起作用，所以我不确定你是如何在 IE 8 中进行测试的。尝试访问jsfiddle.net/5UZbk/1/show（注意我添加了“显示/" 到 URL 的末尾） - 它在 IE 8 中对我来说很好
Here 它表示<wbr> 在任何 IE 中不支持。可能是原因（或者可能不是，以防万一它可能会有所帮助）。
@Ian 我用 IE8 和 IE9 测试了我的真实应用程序。我在其他浏览器中创建的 jsFiddle，然后指向它的链接在 IE9 中打开正常（以及我描述的错误）
@NikosParaskevopoulos 不，这不是问题（我问题的最后一行）
@NikosParaskevopoulos 抱歉，我在最后一行使用了错误的标记，所以它不是整个可见

标签： javascript angularjs internet-explorer angularjs-directive

【解决方案1】：

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

注意，如果您完全删除 div 连接，并尝试以原始形式返回 newText，您仍然会得到

错误：参数无效。

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

【讨论】：

Here 是相同的代码，只是 <wbr> 更改为 <div> - 仍然在 IE 中引发错误
@przno，这是一个已知错误在 IE9-10-11 上，如果您将一些 html 内容放入 ui-view 指令中，则内容会在第一次尝试时正确显示，但不会当你回到相同的状态时。相同的代码在 Firefox 和 Chrome 上运行良好 github.com/angular-ui/ui-router/issues/615
@DaveA 请不要链接 w3schools！它与 W3C 完全无关（您的链接具有误导性），并且经常是错误的、不准确的和过时的。请参阅w3fools 了解更多信息。 Mozilla Developer Network 好多了。
@Oriol，感谢您的链接。信息有用且有趣。但请不要使用 !!! 的评论。当 W3C 链接只是我答案的一小部分时，它给人的印象是我的答案是错误的或具有误导性。

【解决方案2】：

我的"error invalid argument anonymous function call" 在下面的代码中被抛出。

错误：

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

没有错误：

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

【讨论】：

ng-bind-html 相同

【解决方案3】：

不是 Angular 的答案（我知道，这是一个老问题），但我建议您可能对问题采取了错误的方法。而是插入中断（例如，这会破坏字符串中的任何标记），只需使用 CSS 文本溢出或溢出属性。

【讨论】：

【解决方案4】：

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

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

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

Chrome、FF 没有抱怨，只有 IE Edge。最好也检查一下模板

【讨论】：

请注意，这个问题是关于 AngularJS，而不是 Angular 2+。