AngularJS v1.2.5 使用 IE11 的 textarea 和占位符属性的脚本错误答案

【问题标题】：AngularJS v1.2.5 script error with textarea and placeholder attribute using IE11AngularJS v1.2.5 使用 IE11 的 textarea 和占位符属性的脚本错误
【发布时间】：2014-01-06 00:10:25
【问题描述】：

我有一个不能在 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>

如果使用插值指定占位符属性，我会收到以下错误（仅在 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)

这是一个在 Firefox、Chrome、Safari 中运行良好的 Plnkr，但在 IE11 中却不行。 http://plnkr.co/edit/4cJzxtVSDoL2JMI9nYrS?p=preview

我在尝试在 Angular.js 中调试时迷失了方向。我真的很感激任何能让我朝着正确方向前进的提示。谢谢。

【问题讨论】：

也许首先要做的就是复制它。
正在处理它。同时，希望能找到遇到此问题的其他人。
Itr 看起来像是在一个 ajax 请求上，你能试着在你的小提琴中伪造 AJAX 吗？有一个 URL JSFiddle 可以让您发布并获取相同的数据，检查开发工具中的网络选项卡，然后在收到错误时发布您返回的内容。
错误。 github.com/angular/angular.js/issues/5025
复制：stackoverflow.com/questions/20224698/…

标签： javascript jquery internet-explorer angularjs

【解决方案1】：

我能够使用 ng-attr-placeholder 指令在 IE 中正常工作，而不是直接绑定到 DOM 中的属性。例如：

<textarea ng-attr-placeholder="Description of the {{ name }}"></textarea>

【讨论】：

这应该被接受，不需要额外的代码。
此解决方案适用于 IE11 / Angular 1.4.8。谢谢！

【解决方案2】：

上面提到Zsong，这是个bug - https://github.com/angular/angular.js/issues/5025

作为临时措施，我编写了一个指令来处理 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));
                    });
                }

            }
        };

    });

用法：

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

希望这对其他人有所帮助... IE - 呃。

【讨论】：

您应该将此答案发布到之前提出的上述问题。然后人们可以在那里接受它，您可以从 SO 中删除您自己的问题。
好的，我很犹豫是否要强调我自己的答案作为解决方案。 Zsong 指出这是一个错误——他上面的链接就是答案。我的指示是一项临时措施。谢谢。
只需使用ng-attr-placeholder 而不是placeholder。不需要新指令。

【解决方案3】：

我在使用 angular-translate 库 (https://github.com/angular-translate/angular-translate) 时遇到了同样的问题。

特别是在尝试使用“指令方式”翻译包含索引的动态文本时。我将指令替换为“过滤方式”进行翻译，问题解决了。

之前：

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

之后：

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

注意：甚至不包括“{{ ... }}”作为翻译的属性值或用函数调用替换它解决了我的问题。

【讨论】：