jquery - JQuery 要素を AngularJS モデルにバインドする方法は?

Question

HTML要素を動的にバインドするAngularJSモデルがあります。モデルの値を JQuery オブジェクトに設定しようとすると、エラー メッセージが表示されます。

TypeError: Converting circular structure to JSON
at Object.stringify (native)

これは単純化されたjsfiddle の例です。

コードを完璧に動作させる方法はありますか? 円形って具体的に何？

Answer 1

簡単な答え: Fiddleは、次のいずれかの行で修正できます (必要な要素に応じて)。

$scope.myElement = $('#foo').prop("outerHTML");
$scope.myElement = $('#foo').html();

この変更により、Chrome がドキュメント ツリーを深く (というよりも上位に) 見すぎることがなくなります。

あなたの Fiddle の問題は、Chrome が jQuery によって返されたオブジェクトを文字列化する方法に関連していると思います。この文字列化中に、親ドキュメントも文字列化しようとする可能性があります - そこで Angular マジックと相互作用します - 悪い方法で。

ちなみに、提供されている Fiddle のコードでは、前述のエラーは発生しません。Firefox では、Fiddle を実行してもエラーにはなりません。

あなたが何をしようとしているのかはわかりませんが、$compile サービスが提供する機能を探しているのではないかと思います。HTML 文字列または DOM の一部をテンプレートにコンパイルし、テンプレート関数を生成します。これを使用してスコープとテンプレートをリンクできます。

前述のように、コントローラーから DOM にアクセスしないでください。

あなたのアプローチは私には非常にjQuery風に見えます.DOMに基づいてデータを操作しようとしているようです. Angular アプローチは、「データ駆動型ドキュメント」を作成することです。モデル内のデータによって DOM の内容が決定されます。