javascript Angular 抛出“错误:无效参数”。在浏览器中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23892053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:45:17  来源:igfitidea点击:

Angular throws "Error: Invalid argument." in IE

javascriptangularjsinternet-explorerangularjs-directive

提问by przno

I have a directive which takes element's text and places wbrelements after every 10th character. I'm using it for example on table cells with long text (e.g. URLs), so it does not span over the table. Code of the directive:

我有一个指令,它接受元素的文本并在每 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)));
            });
        }
    };
});

Works fine except in IE (I have tried IE8 and IE9), where it throws an error to the console: Error: Invalid argument.

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

Here is jsFiddle, when clicking on the button you can see the error in console.

这是jsFiddle,单击按钮时,您可以在控制台中看到错误。

So obvious question: why is the error there, what is the source of it, and why only in IE?

如此明显的问题:为什么会出现错误,它的来源是什么,为什么只在 IE 中出现?

(Bonus question: how can I make IE dev tools to tell me more about error, like the line from source code, because it took me some time to locate it, Error: Invalid argument.does not tell much about the origin.)

(额外的问题:我怎样才能让 IE 开发工具告诉我更多关于错误的信息,比如源代码中的那一行,因为我花了一些时间来定位它,Error: Invalid argument.并没有告诉我更多的起源。)

P.S.: I know IE does not know the wbr at all, but that is not the issue.

PS:我知道 IE 根本不知道 wbr,但这不是问题。

Edit:in my real application I have re-written the directive to not to look on element's text and modify that, but rather pass the input text via attribute, and works fine now in all browsers. But I'm still curious why the original solution was giving that error in IE, thus starting the bounty.

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

采纳答案by Dave Alperovich

Your attempt to create a directive to inject elements into your string runs into a known bug in IE dealing appendChildmethod. I was able to reproduce your error IE with your fiddle even after removing the <div>appending completely.

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

Notice, that if you remove your divconcatenation completely, and attempt to return newTextin original form, you still get

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

Error: Invalid argument.

错误:无效的参数。

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

UI 视图上的嵌入不适用于 IE9-10-11

回答by n00bsauce

My "error invalid argument anonymous function call"was being thrown from me doing the following on the code below.

"error invalid argument anonymous function call"在下面的代码中执行以下操作时被抛出。

Error:

错误:

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

No Error:

没有错误:

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

回答by oFace

I got same error in IE when I had following error in HTML template:

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

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

disabledtextarea does not allow ngModel in IE

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

Chrome, FF did not complain, just IE Edge. It is a good idea, to check the template too

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

回答by see sharper

Not an Angular answer (and an old question, I know), but I'd suggest you might be taking the wrong approach to the problem. Rather insert breaks (which would ruin any markup in the string for example), simply use the CSS text-overflow or overflow property.

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