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 (e.g. 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.)

P.S.: 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.

Solution 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

Solution 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>

Comments

[przno]

Here is the very same code, just <wbr> changed to <div> - still throws error in IE

[Dave Alperovich]

@przno, this is a known bug On IE9-10-11 if you put some html content into an ui-view directive, the content is correctly shown at the first attempt, but not when you come back to the same status. The same code works fine on Firefox and Chrome github.com/angular-ui/ui-router/issues/615

[Oriol]

@DaveA Please don't link w3schools! It's completely unrelated to W3C (your link is misleading), and often is wrong, inaccurate, and outdated. See w3fools for more info. Mozilla Developer Network is much better.

[Dave Alperovich]

@Oriol, thanks for the link. info is useful and interesting. but please don't use !!! 's to comment. It gives the impression that my answer is wrong or misleading when the W3C link is a small section of my answer.

[ishayle]

same for ng-bind-html

[Heretic Monkey]

Note that this question regards AngularJS, not Angular 2+.