Angular throws “Error: Invalid argument.” in IE

Question

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

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.

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

So obvious question: why is the error there, what is the source of it, and why only in 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.)

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

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.

Answer 1

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

Notice, that if you remove your div concatenation completely, and attempt to return newText in original form, you still get

Error: Invalid argument.

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

Answer 2

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

Error:

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

No Error:

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

Answer 3

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.

Answer 4

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

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

disabled textarea does not allow ngModel in IE

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