Menu
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.
906
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 / 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.
27
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
