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

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


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>


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 / IEapp.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.


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.