Angular.js: Die Bindung von Textbereichsplatzhaltern verursacht eine Ausnahme in IE11

Erstellt am 19. Nov. 2013  ·  23Kommentare  ·  Quelle: angular/angular.js

Siehe folgende Geige:

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

Während der richtige Platzhalter angezeigt wird, erhalte ich in der Konsole auch den folgenden Stack-Trace:

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-Version ist 11.0.9600.16438

IE10 IE11 low investigation broken expected use

Hilfreichster Kommentar

Wie die Dokumentation vorschlägt: Der einfachste Weg, solche Probleme zu beheben, besteht darin, von der Verwendung von placeholder="{{value}}" zu ng-attr-placeholder="{{value}}" zu wechseln.

Alle 23 Kommentare

Tritt auch in ie10 auf, wenn versucht wird, auf nodeValue auf einem elternlosen TextNode (nodeType=3) zuzugreifen.

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

Hier ist eine vorübergehende Problemumgehung ... http://stackoverflow.com/a/20649762/1009125

Ich bevorzuge immer noch Capability Sniffing gegenüber User Agent Sniffing..... Siehe meinen Beitrag zu #2614

Klingt toll, aber welche Fähigkeit könnte in diesem Fall getestet werden? Dh .... äh

Die Möglichkeit, ein Ereignis nicht auszulösen, wenn sich der Platzhalter ändert (wie die
Ausschnitt, den ich in der anderen Ausgabe gepostet habe (ich denke, es gilt immer noch))
Am 17. Dezember 2013 um 21:24 Uhr schrieb "Ender2050" [email protected] :

Klingt toll, aber welche Fähigkeit könnte in diesem Fall getestet werden? Dh .... äh


Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHubhttps://github.com/angular/angular.js/issues/5025#issuecomment -30818022 an
.

Wie die Dokumentation vorschlägt: Der einfachste Weg, solche Probleme zu beheben, besteht darin, von der Verwendung von placeholder="{{value}}" zu ng-attr-placeholder="{{value}}" zu wechseln.

@seckardt Cool, ich wusste nichts über ngAttr . Ich habe als Problemumgehung eine benutzerdefinierte Direktive geschrieben, aber jetzt kann ich sie loswerden.

Ich sehe, dass es in den Dokumenten unter Developer Guide / Directives steht, aber nicht in der API-Referenz. Wäre es nicht eine gute Idee, es auch dort zu haben?

Dies ist jedoch nicht nur die Bindung placeholder , die diesen Fehler auslöst. Dies schlug mit dem gleichen Verhalten fehl:

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

Die Interpolation ist redundant, daher bestand die Problemumgehung in diesem Fall darin, einfach {{ foo }} zu entfernen, aber es ist irgendwie ärgerlich, dass die Fehlermeldung dafür so nutzlos ist. Ich habe mehrere Stunden damit verbracht, dies zu beheben, bevor ich das Problem gefunden habe.

Dieser Fehler tritt auch beim Setzen des Stils style="padding: 3px; background: {{l.Color}}; opacity: 0.7; border-radius: 5px"

Wie kann ich diesen Ausdruck so ersetzen, dass er mit IE funktioniert?

Dies ist ein bekanntes Problem mit IE. Wie oben erwähnt, können Sie ng-attr-style="..." verwenden.

Jeder, der diesen Fehler erhält, sucht einfach nach Argumenten, die für Textarea gesendet wurden.

Ich verwende Winkel 1.2.28. Ich hatte den gleichen Fehler.
<textarea ng-model="data">{{data}}</textarea> funktioniert gut in Mozilla. Aber IE 11 gibt einen ungültigen Argumentfehler aus. für dieses Stück Code.
Lösung:
<textarea ng-model="data"></textarea> ODER <textarea>{{data}}</textarea>
Sieht so aus, als würde das Binden an ng-model und das direkte Setzen des Werts diesen Fehler verursachen, der auch logisch ist.
Dachte nur das könnte helfen. Mir hat dieser Beitrag jedenfalls sehr geholfen.

Dieser Fehler tritt auf, weil (aus welchem ​​Grund auch immer) IE vorübergehend <textarea placeholder="{{'foo'}}"></textarea> in <textarea placeholder="{{ 'foo' }}">{{ 'foo' }}</textarea> konvertiert. Dadurch wird die implizite Direktive zur Textinterpolation auf {{ 'foo' }} TEXT_NODE hinzugefügt, aber bis Angular versucht, den Wert von TEXT_NODE festzulegen, wurde sie von IE wieder entfernt.

Und der Versuch, die nodeValue eines elternlosen TEXT_NODE (z. B. parentlessTextNode.nodeValue = 'foo' ) zu setzen, wirft im IE.

Ich denke, dies ist kein Angular-bezogenes Problem, und (unter Berücksichtigung der Tatsache, dass es eine vernünftige Problemumgehung gibt - mit ng-attr-placeholder ) sollten wir es einfach dokumentieren und weitermachen.

Dieser Fehlerbericht scheint relevant zu sein. Es scheint, dass der Platzhalterwert als Inhalt von <textarea> bestehen bleibt. Sie haben das behoben (zumindest im neuesten IE11), aber nicht zu 100%; dh der Platzhaltertext erscheint als Inhalt, wenn auch nur temporär.

In meinem Fall habe ich nicht einmal einen Platzhalter. Ich habe gerade etwas Ähnliches wie dieses <textarea ng-model='$parent.freetext.text' >{{dataobject.text}}</textarea> und bekomme immer noch den Interpolationsfehler. Alle Gedanken / Lösungen werden sehr geschätzt. FYI, ich verwende die Version 1.5 von anglejs ...

@LotusShiv , geben Sie keinen Wert in Ihren Textbereich ein. Wenn Sie es initialisieren möchten, geben Sie den Wert stattdessen in das Modell ein.

Also gkalpak - in meinem Fall muss ich an den vorhandenen Wert eines WebAPI-Aufrufs binden und dem Benutzer auch erlauben, den Textbereich zu bearbeiten. Daher hatte ich die Werteinstellung ng-model und textarea. Aus Ihrer Antwort habe ich nun Folgendes verstanden: - Ich muss den Wert, der vom WebAPI-Aufruf kommt, auf eine $scope-Objektvariable setzen und dieselbe $scope-Objektvariable auch zum Festlegen der bearbeiteten Inhalte verwenden. Verstehe ich dich richtig? Nochmals vielen Dank im Voraus für alle Vorschläge / Lösungen. Beispielcode wird auch geschätzt....

Nachtrag zu meinem vorherigen Kommentar, ich habe genau das getan, was ich aus dem Vorschlag von gkalpak verstanden habe, und es hat funktioniert. Danke gkalpak , funktioniert gut in IE 11 . Viel Kummer erspart.... :) nachdem ich tagelang so viele andere Tipps und Tricks ausprobiert habe....

Wie viele der oben genannten Personen erwähnt haben, handelt es sich bei diesem Fehler tatsächlich um einen Nutzungsfehler. In meinem Fall befand er sich nicht in einem Textbereich, aber die obigen Kommentare haben wirklich geholfen. Danke an alle :)
Ich werde mein spezifisches Problem und die Lösung unten für andere aufführen, die sich möglicherweise in derselben Situation befinden.

Funktioniert nicht;
<a concat="[result.responsible.Contact.firstName, result.responsible.Contact.lastName]">{{responsibleFullName}}</a>
Arbeiten;
<a>{{result.responsible.Contact.firstName}} {{result.responsible.Contact.lastName}}</a>

Auch auf dieses Problem gestoßen, für mich war es template attr in der Direktive. Wenn Sie nur template: '{{field}}' verwenden, erhalten Sie diesen Fehler. Für mich ersetzte ich Element-HTML durch kompilierten Inhalt, also bestand die Lösung darin, {{field}} zu entfernen und es einfach bei template: '' zu belassen, aber das ist ein seltsamer Fehler und das Debuggen in IE ist schmerzhaft :(

Dasselbe gilt für die rows Bindung für textarea , und ja, IE gab mir KEINE Hinweise, bis ich den Modus "bei jeder Ausnahme unterbrechen" aktivieren musste und durchschritt eine Milliarde Ausnahmen der ersten Chance. Winkel-Debug-Informationen in der Ausnahme haben mich auch nur auf die Komponente verwiesen, aber nicht darauf, was daran falsch ist. Wie auch immer, behoben durch Ändern der Bindung von [rows]="myRowsField" zu [attr.rows]="myRowsField"

@seckardt du versüßt mir den Tag. Eines meiner sehr alten Projekte basiert immer noch auf Angular1 und bemüht sich, eine Lösung für dieses Problem zu finden. Vielen Dank.

Auch wenn es einen "einfachen Workaround" gibt, wäre es viel einfacher, wenn die Fehlermeldung etwas hilfreicher wäre. Ich habe ein riesiges Projekt und _irgendwo_ gibt es diese doppelte Interpolation. Wie soll ich das finden?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen