AngularJS v1.2.5 script error with textarea and placeholder attribute using IE11

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.

Answers:

Answer

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

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.

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.