javascript 使用 IE11 的 AngularJS v1.2.5 脚本错误，带有 textarea 和 placeholder 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20647572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS v1.2.5 script error with textarea and placeholder attribute using IE11
提问by Ender2050
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.
我有一个无法在 IE11 中工作的 Angular JS v1.2.5 表单。它在 Firefox、Chrome、Safari 中运行良好。我的表单在占位符属性中使用带有插值的文本区域。
<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).
如果使用插值指定占位符属性，则会出现以下错误（仅在 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
这是一个在 Firefox、Chrome、Safari 中运行良好的 Plnkr - 但不适用于 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.
我在尝试在 Angular.js 中调试时迷失了方向。我真的很感激任何让我朝着正确方向前进的提示。谢谢。
回答by Alexander
I was able to get everything working correctly in IE using the ng-attr-placeholderdirective instead of binding directly to the attribute in the DOM. For example:
我能够使用ng-attr-placeholder指令让 IE 中的一切正常工作，而不是直接绑定到 DOM 中的属性。例如：
<textarea ng-attr-placeholder="Description of the {{ name }}"></textarea>
回答by Ender2050
Zsong mentioned above, this is a bug - https://github.com/angular/angular.js/issues/5025
Zsong 上面提到，这是一个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).
作为临时措施，我编写了一个指令来处理 IE 中文本区域的占位符。只要它不是 IE，该指令就会设置占位符属性。这应该只在文本区域（不是所有占位符）上是必要的。
//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.
希望这对其他人有帮助... IE - 呃。
回答by user1462357
I had the same issue when using angular-translate library (https://github.com/angular-translate/angular-translate).
我在使用 angular-translate 库（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>
<div translate>{{ scope.textInArray[someIndex] }}</div>
After:
后：
<div>{{ scope.textInArray[someIndex] | translate }}</div>
<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.
注意：甚至不包括“{{ ... }}”作为翻译或通过函数调用替换它的属性值解决了我的问题。
