Est-il possible de mettre à jour des expressions angulaires dans un iframe?

Donc … par exemple, j'essaie d'incorporer un «modèle» de courrier électronique dans un iframe comme un «aperçu» pour l'utilisateur à l'intérieur d'une application angularjs. L'iframe vit à l'intérieur de la zone du contrôleur (appelons-le MainCtrl). L'utilisateur pourrait alors, en utilisant les éléments de formulaire fournis dans MainCtrl, mettre à jour l'aperçu en fonction de leur entrée. Donc, par exemple, disons que notre modèle tiré dans l'iframe ressemble à quelque chose comme ceci:

<!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>

Donc, dans notre index.html (application angularjs), nous aurions des éléments de formulaire liés à {{header}} et {{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>

est-ce possible? Est-il possible que angularjs mette à jour cette information, et, dans l'affirmative, comment? J'ai quelque chose d'similaire, et je pense qu'il ne fonctionnera pas. Je ne peux pas obtenir les expressions angularjs à évaluer … tout ce qui apparaît est {{corps}}, etc …

Si vous exécutez l'iframe et le document parent du même nom de domaine (de sorte qu'aucun Cross-Site-Scripting-Restrictions ne s'applique), vous pouvez appeler une fonction JavaScript dans l'iframe que vous pouvez transmettre des données.

Ce que vous pourriez manquer, c'est que l'iframe est un document distinct du point de vue du navigateur. Donc, si cet iframe devrait exécuter le code AngularJS, vous devrez en faire une application AngularJS distincte.

Voici un exemple où le document parent et l'iframe sont des applications AngularJS distinctes et la valeur d'une entrée de texte dans le parent est envoyée lors de la modification de l'iframe où l'application AngularJS qui l'exécute mettra les données dans la portée.

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

Du point de vue du navigateur, il n'y a rien de spécial sur angulaire – c'est javascript, c'est tout ce qui compte. Je dirais donc que la réponse à vos questions est – oui, cela devrait fonctionner.

Bien sûr, les contraintes de la même politique d'origine s'appliqueront. Aussi, l'asynchronicité peut présenter certains problèmes, mais à part cela, il devrait juste fonctionner