16

I have an Angular JS v1.2.5 form that won't work in IE11. It works fine in Firefox, Chrome, Safari. My form uses a textarea with interpolation inside the placeholder attribute.

 <body ng-controller="MainCtrl"> <p>Hello {{ name }}!</p> <textarea rows="4" placeholder="Description of the {{ name }}"></textarea> </body>

If the placeholder attribute is specified with interpolation, I get the following error (only in IE).

Error: Invalid argument. at interpolateFnWatchAction (https://localhost:44300/Scripts/angular.js:6410:15) at $digest (https://localhost:44300/Scripts/angular.js:11581:23) at $apply (https://localhost:44300/Scripts/angular.js:11832:13) at done (https://localhost:44300/Scripts/angular.js:7774:34) at completeRequest (https://localhost:44300/Scripts/angular.js:7947:7) at onreadystatechange (https://localhost:44300/Scripts/angular.js:7903:11)

Here's a Plnkr that works fine in Firefox, Chrome, Safari - but not in IE11. http://plnkr.co/edit/4cJzxtVSDoL2JMI9nYrS?p=preview

I'm lost trying to debug within Angular.js itself. I'd really appreciate any tips to set me in the right direction. Thanks.

Improve this question
7
  • Maybe the first thing to do is to reproduce it. Commented Dec 18, 2013 at 0:41
  • Working on it. In the meantime, hoping to find someone else who's had this problem. Commented Dec 18, 2013 at 0:52
  • 1
    Itr looks like it's on an ajax request, can you try faking the AJAX in your fiddle? There's a URL JSFiddle has taht you can post to and get the same data back, check your network tab in dev tools an just post what you get back when you get the error to that. Commented Dec 18, 2013 at 1:08
  • 1
    Bug. github.com/angular/angular.js/issues/5025 Commented Dec 18, 2013 at 4:28
  • 2
    Duplicate with: stackoverflow.com/questions/20224698/… Commented Dec 30, 2013 at 10:13

3 Answers 3

Reset to default
50

I was able to get everything working correctly in IE using the ng-attr-placeholder directive instead of binding directly to the attribute in the DOM. For example:

<textarea ng-attr-placeholder="Description of the {{ name }}"></textarea>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This should be accepted anwser, no additional code required.
This solution works on IE11 / Angular 1.4.8. Thanks!
3

Zsong mentioned above, this is a bug - https://github.com/angular/angular.js/issues/5025

As a temporary measure, I wrote a directive to handle placeholders for text areas in IE. This directive will set the placeholder attribute as long as it's not IE. This should only be necessary on text areas (not all placeholders).

//This directive corrects an interpolation error with textarea / IE app.directive("placeholderAttr", function ($timeout, $parse) { return { restrict: "A", scope: { placeholderAttr: '@' }, link: function (scope, element, attrs, controller) { //Test for IE var ie = navigator.userAgent.match(/MSIE/); var ie11 = navigator.userAgent.match(/Trident\/7\./); //If this is IE, remove the placeholder attribute if (!ie && !ie11) { scope.$watch("placeholderAttr", function (value) { element.attr("placeholder", scope.$eval(value)); }); } } }; });

Usage:

<textarea rows="4" data-placeholder-attr="Description of the {{ name }}"></textarea>

Hope this helps someone else... IE - urgh.

Improve this answer

3 Comments

You should post this answer to the above mentioned question that was asked before. Then people can accept it there, and you can remove your own question from SO.
Ok, I was hesitant to highlight my own answer as the solution. Zsong pointed out that this is a bug - his link above is the answer. My directive is a temporary measure. Thanks.
Simply use ng-attr-placeholder instead of placeholder. No need for a new directive.
2

I had the same issue when using angular-translate library (https://github.com/angular-translate/angular-translate).

Specifically when trying to use the "directive way" to translate on a dynamic text containing an index. I replaced the directive by the "filter way" to translate and the problem was solved.

Before:

<div translate>{{ scope.textInArray[someIndex] }}</div>

After:

<div>{{ scope.textInArray[someIndex] | translate }}</div>

Note: Not even including the "{{ ... }}" as attribute value for translate or replacing that by a function call solved my issue.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.