CODEWITHSUNDEEP
javascriptangularjsinternet-explorerangularjs-directive
przno
przno

Reputation: 3504

Angular throws "Error: Invalid argument." in IE

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.

Upvotes: 17

Views: 19205

Answers (4)

oFace
oFace

Reputation: 216

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

Upvotes: 0

n3wbsauce
n3wbsauce

Reputation: 51

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>

Upvotes: 1

see sharper
see sharper

Reputation: 12025

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.

Upvotes: 0

Dave Alperovich
Dave Alperovich

Reputation: 32500

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

Upvotes: 9

Related Questions