Angular.js: Textareaプレースホルダーのバインドにより、IE11で例外が発生します

作成日 2013年11月19日  ·  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でも発生し、親のないTextNode(nodeType = 3)でnodeValueにアクセスしようとします

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

https://github.com/angular/angular.js/issues/2614に関連している可能性がありますか?

これが一時的な回避策です... http://stackoverflow.com/a/20649762/1009125

私はまだユーザーエージェントスニッフィングよりも機能スニッフィングを好みます.....#2614の私の投稿を参照してください

素晴らしいように聞こえますが、この場合、どの機能をテストできますか? つまり....うん

プレースホルダーが変更されたときにイベントを発生させない機能(
他の号に投稿したスニペット(まだ当てはまると思います))
2013年12月17日21:24、「Ender2050」 [email protected]は次のように書いています。

素晴らしいように聞こえますが、この場合、どの機能をテストできますか? つまり....うん


このメールに直接返信するか、Gi tHubhttps://github.com/angular/angular.js/issues/5025#issuecomment-30818022で表示してください

ドキュメントが示唆しているように:このような問題に対処する最も簡単な方法は、 placeholder="{{value}}"の使用からng-attr-placeholder="{{value}}"の使用に切り替えることです。

@seckardtかっこいい、 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に送信された引数を探すだけです。

Angular1.2.28を使用しています。同じエラーが発生しました。
<textarea ng-model="data">{{data}}</textarea>はMozillaで正常に機能します。 ただし、IE11では無効な引数エラーが発生します。 このコードの場合。
解決:
<textarea ng-model="data"></textarea>または<textarea>{{data}}</textarea>
ng-modelにバインドし、値を直接入力すると、このエラーが直接発​​生するように見えますが、これも論理的です。
これが役立つかもしれないと思っただけです。 とにかく、この投稿は私を大いに助けました。

このエラーが発生するのは、(何らかの理由で)IEが一時的に<textarea placeholder="{{'foo'}}"></textarea><textarea placeholder="{{ 'foo' }}">{{ 'foo' }}</textarea>に変換するためです。 これにより、 {{ 'foo' }} TEXT_NODEに暗黙のテキスト補間ディレクティブが追加されますが、AngularがTEXT_NODEの値を設定しようとするまでに、IEによって再び削除されています。

そして、親のないTEXT_NODE(たとえば、 parentlessTextNode.nodeValue = 'foo' )のnodeValueを設定しようとすると、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に感謝します。IE11では問題なく動作します。 他の多くのヒントやコツを何日も試した後、多くの心痛を救いました.... :)。

上記の人々の多くがこのエラーは実際には使用法のエラーであると述べているので、私の場合はテキストエリアではありませんでしたが、上記のコメントは本当に役に立ちました。 みんな、ありがとう :)
私の特定の問題を置き、同じ状況にあるかもしれない他の人のために以下を修正します。

動作していません。
<a concat="[result.responsible.Contact.firstName, result.responsible.Contact.lastName]">{{responsibleFullName}}</a>
働く;
<a>{{result.responsible.Contact.firstName}} {{result.responsible.Contact.lastName}}</a>

また、この問題が発生しました。私にとっては、ディレクティブのtemplate attrでした。 template: '{{field}}'だけを使用すると、このエラーが発生します。 私の場合、要素HTMLをコンパイル済みコンテンツに置き換えていたので、解決策は{{field}}を削除し、 template: ''だけのままにすることでしたが、これは奇妙なバグであり、IEでのデバッグは苦痛です:(

textarearowsバインディングでも同じことが言えます。そうです、「例外ごとにブレーク」モードをオンにしてステップスルーするまで、IEは私に手がかりを与えませんでした。数十億の最初のチャンスの例外。 例外のAngularデバッグ情報も、コンポーネントを示しているだけで、何が問題なのかは示していません。 とにかく、バインディングを[rows] = "myRowsField"から[attr.rows] = "myRowsField"に変更することで修正されました

@seckardtあなたは私の日を作ります。 私の非常に古いプロジェクトの1つは、まだAngular1に基づいており、この問題の解決策を見つけるのに苦労しています。 どうもありがとう。

「簡単な回避策」がある場合でも、エラーメッセージがもう少し役立つ場合は、はるかに簡単です。 私には巨大なプロジェクトがあり、_どこか_この二重補間があります。 どうやってこれを見つけるのですか?

このページは役に立ちましたか?
0 / 5 - 0 評価