Textarea placeholder binding causes exception in IE11

[provegard]

See the following fiddle:

http://jsfiddle.net/provegard/wLBwd/

While the correct placeholder appears, I also get the following stack trace in the console:

Error: Invalid argument.
   at interpolateFnWatchAction (http://code.angularjs.org/1.2.1/angular.js:6366:15)
   at $digest (http://code.angularjs.org/1.2.1/angular.js:11443:21)
   at $apply (http://code.angularjs.org/1.2.1/angular.js:11682:13)
   at Anonymous function (http://code.angularjs.org/1.2.1/angular.js:1285:9)
   at invoke (http://code.angularjs.org/1.2.1/angular.js:3616:18)
   at doBootstrap (http://code.angularjs.org/1.2.1/angular.js:1283:5)
   at bootstrap (http://code.angularjs.org/1.2.1/angular.js:1297:5)
   at angularInit (http://code.angularjs.org/1.2.1/angular.js:1246:5)
   at Anonymous function (http://code.angularjs.org/1.2.1/angular.js:20126:5)
   at trigger (http://code.angularjs.org/1.2.1/angular.js:2298:7)

IE version is 11.0.9600.16438

[jamie-pate]

Also happens in ie10, attempting to access nodeValue on a parentless TextNode (nodeType=3)

// in function addTextInterpolateDirective()
node[0].nodeValue = value

[jamie-pate]

May be related to #2614 ??

[aschiebler]

Here's a temporary workaround... http://stackoverflow.com/a/20649762/1009125

[jamie-pate]

I still prefer capability sniffing over user agent sniffing..... See my post on #2614

[aschiebler]

Sounds great, but which capability could be tested in this case? Ie....ugh

[jamie-pate]

The capability to not raise an event when the placeholder changes (like the
snippet I posted in the other issue (I think it still applies))
On 17 Dec 2013 21:24, "Ender2050" notifications@github.com wrote:

Sounds great, but which capability could be tested in this case? Ie....ugh

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/5025#issuecomment-30818022
.

[seckardt]

As the docs suggest: Easiest way to address such issues is to switch from using placeholder="{{value}}" to ng-attr-placeholder="{{value}}".

[provegard]

@seckardt Cool, I didn't know about ngAttr. I wrote a custom directive as a workaround, but now I can get rid of it.

I see it's under Developer Guide / Directives in the docs, but not in the API reference. Wouldn't it be a good idea to have it there too?

[tomasaschan]

This isn't just placeholder binding that throws this error, though. This failed with the same behavior:

<textarea ng-model="foo">{{ foo }}</textarea>

The interpolation is redundant, so the workaround in this case was just to remove {{ foo }}, but it's kind-of annoying that the error message for this is so useless. I spent several hours troubleshooting this before finding the issue.

[RafaelSalguero]

This error happens also when setting the style style="padding: 3px; background: {{l.Color}}; opacity: 0.7; border-radius: 5px"

How can I substitute this expression in a way that it works with IE?

[gkalpak]

This is a known issue with IE. As mentioned above, you can use ng-attr-style="...".

[aditi-andurkar]

Anybody getting this error just look for arguments sent for textarea.

I am using angular 1.2.28 I had the same error.
<textarea ng-model="data">{{data}}</textarea> works fine in Mozilla. But, IE 11 gives invalid argument error. for this piece of code.
Solution:
<textarea ng-model="data"></textarea> OR <textarea>{{data}}</textarea>
Looks like binding to ng-model and putting value directly causes this error which is logical also.
Just thought this might be of help. Anyway, this post helped me a lot.

[gkalpak]

This error happens, because (for whatever reason) IE temporarily converts <textarea placeholder="{{'foo'}}"></textarea> to <textarea placeholder="{{ 'foo' }}">{{ 'foo' }}</textarea>. This adds the implicit text-interpolation directive on the {{ 'foo' }} TEXT_NODE, but by the time Angular tries to set the TEXT_NODE's value, it has been removed again by IE.

And trying to set the nodeValue of a parentless TEXT_NODE (e.g. parentlessTextNode.nodeValue = 'foo') throws in IE.

I think this is not an Angular-related issue and (taking into account that there is a reasonable workaround - using ng-attr-placeholder) we should just document it and move on.

[gkalpak]

This bug report seems relevant. It seems that the placeholder value would stick around as <textarea>'s content. They have fixed that (at least in latest IE11), but not 100%; i.e. the placeholder text does appear as content, albeit only temporarily.

[LotusShiv]

In my case, I dont even have a placeholder. I just have something similar to this <textarea ng-model='$parent.freetext.text' >{{dataobject.text}}</textarea> and I still get the interpolation error. Any thoughts/solution is greatly appreciated. FYI, I am using 1.5 version of angularjs...

[gkalpak]

@LotusShiv, don't put any value in your text area. If you want to initialize it, put the value on the model instead.

[LotusShiv]

So gkalpak - in my case I need to bind to the existing value from a WebAPI call and also allow user to edit the text area. Hence I had the ng-model and textarea value setting. Now the way I understood from your response is that - I have to set the value coming from the WebAPI call to a $scope object variable and use the same $scope object variable for setting the edited contents as well. Am I understanding you correctly? Again thanks in advance for any suggestions/solution. Sample code is appreciated too....

[LotusShiv]

Addendum to my previous comment, I did exactly as I explained of what I understood from gkalpak 's suggestion and it worked. Thanks gkalpak, works just fine in IE 11. Saved a lot of heartache.... :) after days of trying so many other tips and tricks ....

[Lelli]

As many of the people above have mentioned this error is in fact a usage error, in my case it was not in a textarea but the comments above really helped. Thanks everyone :)
Will put my specific problem and fix below for others that might be in the same situation.

Not working;
<a concat="[result.responsible.Contact.firstName, result.responsible.Contact.lastName]">{{responsibleFullName}}</a>
Working;
<a>{{result.responsible.Contact.firstName}} {{result.responsible.Contact.lastName}}</a>

[Pirozek]

Also encountered this problem, for me it was template attr in directive. When you use just template: '{{field}}' you will get this error. For me I was replacing element HTML with compiled content, so the solution was to remove {{field}}and leave it just with template: '', but this is strange bug and debugging it in IE is pain :(

[rsheptolut]

Same thing with the rows binding for the textarea, and yes, IE wasn't giving me ANY clues until I've had to turn on the "break on every exception" mode and stepped through a billion of first-chance exceptions. Angular debug info in the exception also only pointed me to the component, but not to what's wrong with it. Anyway, fixed by changing the binding from [rows]="myRowsField" to [attr.rows]="myRowsField"

[alex123bob]

@seckardt you make my day. One of my very old project is still based on Angular1, struggling to find solution to this problem. Thanks a lot.

[eluchsinger]

Even if there is an "easy workaround", it would be a lot easier, if the error message would be a bit more helpful. I have a huge project and somewhere there is this double interpolation. How am I supposed to find this?