IE10 +上的AngularJS，帶占位符的textarea導致“參數無效”。

Question

在IE10 +上使用angularJS，TextArea和占位符時，我得到“ 無效參數 ”。

這將僅在textarea節點以</textarea>關閉時發生，並且當我現在關閉textarea時不會發生。

這將引發“無效參數”異常：

<div ng-app>
    <input ng-model="placeholderModel" type="text"/>
    <textarea id="message" placeholder="{{placeholderModel}}" ng-model="textareaModel"></textarea>
</div>

這將沒有問題：

<div ng-app>
    <input ng-model="placeholderModel" type="text"/>
    <textarea id="message" placeholder="{{placeholderModel}}" ng-model="textareaModel"/>
</div>

在這里運行示例： http ： //jsfiddle.net/huecc/

Answer 1

這似乎是你綁定到元素占位符的方式的一個問題 - 奇怪，我知道。

我能夠使用ng-attr-placeholder指令在IE中正常工作，而不是直接綁定到DOM中的屬性。

例如， 而不是：

<textarea placeholder="{{placeholderModel}}" ng-model="textareaModel"></textarea>

試試這個：

<textarea ng-attr-placeholder="placeholderModel" ng-model="textareaModel"></textarea>

相關： 使用IE11的帶有textarea和占位符屬性的AngularJS v1.2.5腳本錯誤

Answer 2

我今天遇到了這個錯誤，隨機偶然發現了這個問題。 這就是為我解決的問題

之前：

<textarea placeholder="{[{ 'NAME' | translate }]}" ng-model="name" name="name"></textarea>

后：

<textarea placeholder="{[{ 'NAME' | translate }]}" ng-model="name" name="name"> </textarea>

請注意textarea內部的小空間，這實際上阻止了IE抱怨...

Answer 3

我知道這個問題現在很老了，但我想我也會想到這個問題。 幾個月前我們遇到了這個問題並且不得不進行修復，因此我們最終使用該指令來解決問題：

mod.directive('placeHolder', [
    function(){
        return {
            restrict: 'A',
            link: function(scope, elem, attrs){
                scope.$watch(attrs.placeHolder, function(newVal,oldVal){
                    elem.attr('placeholder', newVal);
                });
            }
        };
    }
]);

然后你可以在你的視圖中使用它：

<textarea place-holder="placeholderModel" ng-model="textareaModel"></textarea>

一旦您的模型數據到達（可能是異步），該指令將向<textarea>添加一個傳統的placeholder屬性，它將按您的意願工作。

這不是最好的解決方案，但它確實有效。 希望有所幫助。