8

そのため...たとえば、angularjsアプリ内のユーザーの「プレビュー」として、電子メールの「テンプレート」をiframeに取り込もうとしています。iframe はコントローラー領域内にあります (MainCtrl と呼びましょう)。ユーザーは、MainCtrl 内で提供されるフォーム要素を使用して、入力に基づいてプレビューを更新できます。たとえば、iframe に取り込まれるテンプレートが次のようになっているとします。

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style type="text/css">
    .some {styles: here};
    </style>
</head>

<body>
    <h1>{{header}}</h1>

    <p>{{body}}</p>

</body>

</html>

したがって、index.html (angularjs アプリ) 内では、フォーム要素が {{header}} と {{body}} にバインドされます...

<div ng-controller="MainCtrl">
    <input type="text" ng-model="header" placeholder="header text" />
    <input type="text" ng-model="body" placeholder="body text" />
    <iframe src="template.html" width="800" height="1500"></iframe>
</div>

それは可能ですか？angularjs がその情報を更新することは可能ですか?もしそうなら、どのように? 私は似たような設定をしていますが、うまくいかないようです。評価するangularjs式を取得できません...表示されるのは{{body}}などだけです...

4

2 に答える 2

12

iframe と親ドキュメントを同じドメイン名から実行する場合 (クロスサイト スクリプティング制限が適用されないようにするため)、データを渡すことができる iframe で JavaScript 関数を呼び出すことができます。

あなたが見落としているかもしれないのは、iframe がブラウザーの観点からは別個の文書であるということです。したがって、この iframe で AngularJS コードを実行する必要がある場合は、別の AngularJS アプリケーションにする必要があります。

以下は、親ドキュメントと iframe の両方が別々の AngularJS アプリケーションであり、変更時に親のテキスト入力の値が iframe に送信され、そこで実行されている AngularJS アプリケーションがデータをスコープに入れる例です。

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

于 2013-10-01T21:30:34.273 に答える
0

ブラウザーの観点からは、angular について特別なことは何もありません。これは javascript であり、それだけが重要です。だから私はあなたの質問への答えは - はい、それはうまくいくはずです。

もちろん、同一オリジン ポリシーの制約が適用されます。また、非同期性はいくつかの問題を引き起こす可能性がありますが、それ以外はうまくいくはずです

于 2013-10-01T21:07:36.527 に答える