Angular.js: La liaison d'espace réservé Textarea provoque une exception dans IE11

Se produit également dans ie10, en essayant d'accéder à nodeValue sur un TextNode sans parent (nodeType=3)

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

Peut être lié à https://github.com/angular/angular.js/issues/2614 ??

Voici une solution temporaire... http://stackoverflow.com/a/20649762/1009125

Je préfère toujours le reniflement de capacité au reniflement d'agent utilisateur ..... Voir mon message sur # 2614

Cela semble génial, mais quelle capacité pourrait être testée dans ce cas ? C'est-à-dire ... pouah

La possibilité de ne pas déclencher d'événement lorsque l'espace réservé change (comme le
extrait que j'ai posté dans l'autre numéro (je pense que cela s'applique toujours))
Le 17 décembre 2013 à 21h24, "Ender2050" [email protected] a écrit :

Cela semble génial, mais quelle capacité pourrait être testée dans ce cas ? C'est-à-dire ... pouah

—
Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps://github.com/angular/angular.js/issues/5025#issuecomment -30818022
.

Comme le suggèrent les documents : le moyen le plus simple de résoudre ces problèmes consiste à passer de placeholder="{{value}}" à ng-attr-placeholder="{{value}}" .

@seccardt Cool, je ne connaissais pas ngAttr . J'ai écrit une directive personnalisée comme solution de contournement, mais maintenant je peux m'en débarrasser.

Je vois que c'est sous Developer Guide / Directives dans la documentation, mais pas dans la référence de l'API. Ne serait-ce pas une bonne idée de l'avoir là aussi ?

Cependant, ce n'est pas seulement la liaison placeholder qui génère cette erreur. Cela a échoué avec le même comportement :

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

L'interpolation est redondante, donc la solution de contournement dans ce cas était simplement de supprimer {{ foo }} , mais c'est un peu ennuyeux que le message d'erreur pour cela soit si inutile. J'ai passé plusieurs heures à résoudre ce problème avant de trouver le problème.

Cette erreur se produit également lors de la définition du style style="padding: 3px; background: {{l.Color}}; opacity: 0.7; border-radius: 5px"

Comment puis-je remplacer cette expression de manière à ce qu'elle fonctionne avec IE ?

Il s'agit d'un problème connu avec IE. Comme mentionné ci-dessus, vous pouvez utiliser ng-attr-style="..." .

Toute personne obtenant cette erreur recherche simplement les arguments envoyés pour textarea.

J'utilise angulaire 1.2.28 j'ai eu la même erreur.
<textarea ng-model="data">{{data}}</textarea> fonctionne bien dans Mozilla. Mais, IE 11 donne une erreur d'argument non valide. pour ce morceau de code.
Solution:
<textarea ng-model="data"></textarea> OU <textarea>{{data}}</textarea>
On dirait que la liaison à ng-model et la valeur de valeur provoquent directement cette erreur, ce qui est également logique.
Je pensais juste que cela pourrait être utile. Quoi qu'il en soit, ce post m'a beaucoup aidé.

Cette erreur se produit car (pour une raison quelconque) IE convertit temporairement <textarea placeholder="{{'foo'}}"></textarea> en <textarea placeholder="{{ 'foo' }}">{{ 'foo' }}</textarea> . Cela ajoute la directive implicite d'interpolation de texte sur le {{ 'foo' }} TEXT_NODE, mais au moment où Angular essaie de définir la valeur de TEXT_NODE, elle a de nouveau été supprimée par IE.

Et essayer de définir le nodeValue d'un TEXT_NODE sans parent (par exemple parentlessTextNode.nodeValue = 'foo' ) jette dans IE.

Je pense que ce n'est pas un problème lié à Angular et (en tenant compte du fait qu'il existe une solution de contournement raisonnable - en utilisant ng-attr-placeholder ), nous devrions simplement le documenter et passer à autre chose.

Ce rapport de bogue semble pertinent. Il semble que la valeur de l'espace réservé resterait dans le contenu de <textarea> . Ils ont corrigé cela (au moins dans le dernier IE11), mais pas à 100 % ; c'est-à-dire que le texte de l'espace réservé apparaît comme contenu, bien que temporairement.

Dans mon cas, je n'ai même pas d'espace réservé. J'ai juste quelque chose de similaire à ce <textarea ng-model='$parent.freetext.text' >{{dataobject.text}}</textarea> et j'obtiens toujours l'erreur d'interpolation. Toute pensée/solution est grandement appréciée. Pour info, j'utilise la version 1.5 d'angularjs...

@LotusShiv , ne mettez aucune valeur dans votre zone de texte. Si vous voulez l'initialiser, mettez plutôt la valeur sur le modèle.

Donc gkalpak - dans mon cas, je dois lier la valeur existante à partir d'un appel WebAPI et également permettre à l'utilisateur de modifier la zone de texte. Par conséquent, j'ai eu le paramètre de valeur ng-model et textarea. Maintenant, d'après votre réponse, j'ai compris que - je dois définir la valeur provenant de l'appel WebAPI sur une variable d'objet $scope et utiliser la même variable d'objet $scope pour définir également le contenu modifié. Est-ce que je vous comprends bien ? Encore merci d'avance pour toute suggestion/solution. Un exemple de code est également apprécié....

Addendum à mon commentaire précédent, j'ai fait exactement ce que j'ai expliqué de ce que j'ai compris de la suggestion de gkalpak et cela a fonctionné. Merci gkalpak , fonctionne très bien dans IE 11 . J'ai sauvé beaucoup de chagrin d'amour... :) après avoir essayé tant d'autres trucs et astuces pendant des jours...

Comme beaucoup de personnes ci-dessus l'ont mentionné, cette erreur est en fait une erreur d'utilisation, dans mon cas, ce n'était pas dans une zone de texte, mais les commentaires ci-dessus ont vraiment aidé. Merci tout le monde :)
Je mettrai mon problème spécifique et le corrigerai ci-dessous pour les autres qui pourraient être dans la même situation.

Ca ne fonctionne pas;
<a concat="[result.responsible.Contact.firstName, result.responsible.Contact.lastName]">{{responsibleFullName}}</a>
Travaillant;
<a>{{result.responsible.Contact.firstName}} {{result.responsible.Contact.lastName}}</a>

J'ai également rencontré ce problème, pour moi c'était template attr dans la directive. Lorsque vous utilisez seulement template: '{{field}}' , vous obtiendrez cette erreur. Pour moi, je remplaçais l'élément HTML par du contenu compilé, donc la solution était de supprimer {{field}} et de le laisser juste avec template: '' , mais c'est un bogue étrange et le déboguer dans IE est pénible :(

Même chose avec la liaison rows pour le textarea , et oui, IE ne me donnait AUCUN indice jusqu'à ce que j'aie dû activer le mode "pause à chaque exception" et franchir un milliard d'exceptions de la première chance. Les informations de débogage angulaire dans l'exception ne m'ont également pointé que vers le composant, mais pas vers ce qui ne va pas. Quoi qu'il en soit, corrigé en changeant la liaison de [rows]="myRowsField" à [attr.rows]="myRowsField"

@seccardt tu fais ma journée. Un de mes très vieux projets est toujours basé sur Angular1, peinant à trouver une solution à ce problème. Merci beaucoup.

Même s'il existe une "solution de contournement facile", ce serait beaucoup plus facile si le message d'erreur était un peu plus utile. J'ai un énorme projet et _quelque part_ il y a cette double interpolation. Comment suis-je censé trouver ça ?