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

时间:2013-12-18 00:36:54

标签: javascript jquery internet-explorer angularjs

我有一个Angular JS v1.2.5表单在IE11中不起作用。它在Firefox,Chrome,Safari中运行良好。我的表单在占位符属性中使用带插值的textarea。

  <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内部进行调试。我真的很感激任何让我朝着正确方向前进的提示。感谢。

3 个答案:

答案 0 :(得分:49)

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

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

答案 1 :(得分:3)

上面提到的Zsong,这是一个错误 - 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 - urgh。

答案 2 :(得分:2)

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

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

在:

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

后:

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

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