AngularJS на IE10 +, textarea с записями "Недопустимый аргумент".

Я получаю "Недопустимый аргумент" при использовании angularJS, TextArea с placeholder, на IE10 +.

Это произойдет ТОЛЬКО, когда textarea node будет закрыто с помощью </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/

Ответы

Ответ 1

Это, похоже, проблема с тем, как вы привязываетесь к элементу-заполнителю элемента - странно, я знаю.

Я смог получить все, что правильно работает в IE, используя директиву ng-attr-placeholder вместо привязки непосредственно к атрибуту в DOM.

Например, вместо:

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

Попробуйте следующее:

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

Связанный: Ошибка AngularJS v1.2.5 script с атрибутом textarea и placeholder с использованием IE11

Ответ 2

Сегодня я испытал эту ошибку и случайно наткнулся на этот вопрос. Вот то, что решило это для меня

До:

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

После того, как:

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

Обратите внимание на небольшое пространство внутри текстового поля, что фактически остановило IE от жалобы...

Ответ 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>

Как только ваши данные модели поступят (возможно, асинхронно), директива добавит традиционный атрибут placeholder к <textarea>, и он будет работать так, как вы хотели бы.

Это не самое лучшее решение, но оно работает. Надеюсь, что это поможет.