IE中的Angular throws“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.并没有说明原点。）

PS：我知道IE根本不知道wbr，但这不是问题。

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

Answer 1

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

请注意，如果您完全删除了div连接，并尝试以原始形式返回newText ，那么您仍然可以获得

错误：参数无效。

在UI视图上的转换不适用于IE9-10-11

Answer 2

我的"error invalid argument anonymous function call"正在抛出我在下面的代码上执行以下操作。

错误：

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

没错误：

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

Answer 3

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

Answer 4

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

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

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

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