Angular throws"错误:参数无效." 在IE中

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