Angular.js: Привязка заполнителя текстовой области вызывает исключение в IE11

Созданный на 19 нояб. 2013  ·  23Комментарии  ·  Источник: angular/angular.js

См. следующую скрипку:

http://jsfiddle.net/provegard/wLBwd/

Пока появляется правильный заполнитель, я также получаю следующую трассировку стека в консоли:

Error: Invalid argument.
   at interpolateFnWatchAction (http://code.angularjs.org/1.2.1/angular.js:6366:15)
   at $digest (http://code.angularjs.org/1.2.1/angular.js:11443:21)
   at $apply (http://code.angularjs.org/1.2.1/angular.js:11682:13)
   at Anonymous function (http://code.angularjs.org/1.2.1/angular.js:1285:9)
   at invoke (http://code.angularjs.org/1.2.1/angular.js:3616:18)
   at doBootstrap (http://code.angularjs.org/1.2.1/angular.js:1283:5)
   at bootstrap (http://code.angularjs.org/1.2.1/angular.js:1297:5)
   at angularInit (http://code.angularjs.org/1.2.1/angular.js:1246:5)
   at Anonymous function (http://code.angularjs.org/1.2.1/angular.js:20126:5)
   at trigger (http://code.angularjs.org/1.2.1/angular.js:2298:7)

Версия IE: 11.0.9600.16438.

IE10 IE11 low investigation broken expected use

Самый полезный комментарий

Как подсказывает документация: самый простой способ решить такие проблемы — перейти с использования placeholder="{{value}}" на ng-attr-placeholder="{{value}}" .

Все 23 Комментарий

Также происходит в ie10 при попытке доступа к nodeValue в текстовом узле без родителей (nodeType=3).

// in function addTextInterpolateDirective()
node[0].nodeValue = value

Может быть связано с https://github.com/angular/angular.js/issues/2614 ??

Вот временное решение... http://stackoverflow.com/a/20649762/1009125

Я по-прежнему предпочитаю сниффинг возможностей, а не сниффинг пользовательского агента..... См. мой пост #2614

Звучит здорово, но какую возможность можно проверить в этом случае? То есть .... тьфу

Возможность не вызывать событие при изменении заполнителя (например,
фрагмент, который я разместил в другом выпуске (я думаю, что он все еще актуален))
17 декабря 2013 г., 21:24, «Ender2050» [email protected] написал:

Звучит здорово, но какую возможность можно проверить в этом случае? То есть .... тьфу


Ответьте на это письмо напрямую или просмотрите его на Gi tHubhttps://github.com/angular/angular.js/issues/5025#issuecomment -30818022
.

Как подсказывает документация: самый простой способ решить такие проблемы — перейти с использования placeholder="{{value}}" на ng-attr-placeholder="{{value}}" .

@seccardt Круто, я не знал о ngAttr . Я написал пользовательскую директиву в качестве обходного пути, но теперь я могу от нее избавиться.

Я вижу, что это находится в Руководстве разработчика/Директивах в документах, но не в справочнике по API. Не лучше ли было бы и там его разместить?

Однако эту ошибку вызывает не только привязка placeholder . Это не удалось с тем же поведением:

<textarea ng-model="foo">{{ foo }}</textarea>

Интерполяция избыточна, поэтому обходной путь в этом случае состоял в том, чтобы просто удалить {{ foo }} , но это немного раздражает, что сообщение об ошибке для этого настолько бесполезно. Я потратил несколько часов на устранение неполадок, прежде чем нашел проблему.

Эта ошибка возникает также при установке стиля style="padding: 3px; background: {{l.Color}}; opacity: 0.7; border-radius: 5px"

Как я могу заменить это выражение так, чтобы оно работало с IE?

Это известная проблема с IE. Как упоминалось выше, вы можете использовать ng-attr-style="..." .

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

Я использую angular 1.2.28, у меня была такая же ошибка.
<textarea ng-model="data">{{data}}</textarea> отлично работает в Mozilla. Но IE 11 выдает ошибку недопустимого аргумента. для этого фрагмента кода.
Решение:
<textarea ng-model="data"></textarea> ИЛИ <textarea>{{data}}</textarea>
Похоже, что привязка к ng-модели и установка значения напрямую вызывают эту ошибку, что также логично.
Просто подумал, что это может помочь. В любом случае, этот пост мне очень помог.

Эта ошибка возникает из-за того, что (по какой-то причине) IE временно преобразует <textarea placeholder="{{'foo'}}"></textarea> в <textarea placeholder="{{ 'foo' }}">{{ 'foo' }}</textarea> . Это добавляет неявную директиву интерполяции текста в {{ 'foo' }} TEXT_NODE, но к тому времени, когда Angular пытается установить значение TEXT_NODE, оно снова удаляется IE.

И попытка установить nodeValue TEXT_NODE без родителей (например, parentlessTextNode.nodeValue = 'foo' ) вызывает IE.

Я думаю, что это не проблема, связанная с Angular, и (принимая во внимание, что есть разумный обходной путь — использование ng-attr-placeholder ) мы должны просто задокументировать это и двигаться дальше.

Этот отчет об ошибке кажется актуальным. Кажется, что значение заполнителя останется как содержимое <textarea> . Они исправили это (по крайней мере, в последнем IE11), но не на 100%; т. е. текст-заполнитель отображается как содержимое, хотя и временно.

В моем случае у меня даже нет заполнителя. У меня просто есть что-то похожее на этот <textarea ng-model='$parent.freetext.text' >{{dataobject.text}}</textarea> , и я все еще получаю ошибку интерполяции. Любые мысли/решения приветствуются. К вашему сведению, я использую 1.5 версию angularjs...

@LotusShiv , не добавляйте никаких значений в текстовую область. Если вы хотите инициализировать его, вместо этого поместите значение в модель.

Итак , gkalpak - в моем случае мне нужно привязать существующее значение из вызова WebAPI, а также разрешить пользователю редактировать текстовую область. Следовательно, у меня была настройка значения ng-model и textarea. Теперь, как я понял из вашего ответа, я должен установить значение, исходящее от вызова WebAPI, в переменную объекта $scope и использовать ту же переменную объекта $scope для установки отредактированного содержимого. Я правильно тебя понимаю? Еще раз спасибо заранее за любые предложения/решения. Пример кода тоже приветствуется....

В дополнение к моему предыдущему комментарию я сделал именно так, как объяснил, что я понял из предложения gkalpak, и это сработало. Спасибо, gkalpak , отлично работает в IE 11 . Сэкономил много душевных страданий.... :) после нескольких дней перепробования множества других советов и приемов....

Как многие из вышеперечисленных людей упоминали, что эта ошибка на самом деле является ошибкой использования, в моем случае она была не в текстовой области, но приведенные выше комментарии действительно помогли. Всем спасибо :)
Я поставлю свою конкретную проблему и исправлю ниже для других, которые могут оказаться в такой же ситуации.

Не работает;
<a concat="[result.responsible.Contact.firstName, result.responsible.Contact.lastName]">{{responsibleFullName}}</a>
Работающий;
<a>{{result.responsible.Contact.firstName}} {{result.responsible.Contact.lastName}}</a>

Также столкнулся с этой проблемой, для меня это был template в директиве. Когда вы используете только template: '{{field}}' , вы получите эту ошибку. Для меня я заменял элемент HTML скомпилированным содержимым, поэтому решение состояло в том, чтобы удалить {{field}} и оставить его только с template: '' , но это странная ошибка, и отладка ее в IE - это боль :(

То же самое с привязкой rows для textarea , и да, IE не давал мне НИКАКИХ подсказок, пока мне не пришлось включить режим «разрыв при каждом исключении» и пройти через миллиард исключений первого шанса. Информация об отладке Angular в исключении также указала мне только на компонент, но не на то, что с ним не так. Во всяком случае, исправлено путем изменения привязки с [rows]="myRowsField" на [attr.rows]="myRowsField"

@seccardt , ты делаешь мой день. Один из моих очень старых проектов все еще основан на Angular1, и я изо всех сил пытаюсь найти решение этой проблемы. Большое спасибо.

Даже если есть «простой обходной путь», было бы намного проще, если бы сообщение об ошибке было немного полезнее. У меня есть огромный проект и _где-то_ есть эта двойная интерполяция. Как мне это найти?

Была ли эта страница полезной?
0 / 5 - 0 рейтинги