是否可以在 iframe 内更新 angularjs 表达式? [英] Is it possible to update angularjs expressions inside of an iframe?
问题描述
所以...例如，我试图将电子邮件模板"拉入 iframe 作为 angularjs 应用程序内用户的预览".iframe 位于控制器区域内(我们称之为 MainCtrl).然后，用户将能够使用 MainCtrl 中提供的表单元素，根据他们的输入更新预览.例如，假设我们被拉入 iframe 的模板如下所示:
<头><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><style type="text/css">.some {styles: here};</风格><身体><h1>{{header}}</h1><p>{{body}}</p></html>因此在我们的 index.html(angularjs 应用程序)中，我们会将表单元素绑定到 {{header}} 和 {{body}}...
<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>这可能吗?angularjs 是否可以更新该信息，如果可以，如何更新?我有类似的设置，似乎不起作用.我无法让 angularjs 表达式进行评估...所有显示的是 {{body}} 等...
如果您从同一个域名运行 iframe 和父文档(这样就不会应用跨站点脚本限制)，那么您可以调用 JavaScript可以传递数据的 iframe 中的函数.
您可能缺少的是，从浏览器的角度来看，iframe 是一个单独的文档.因此，如果此 iframe 应运行 AngularJS 代码，则需要将其设为单独的 AngularJS 应用程序.
这是一个示例，其中父文档和 iframe 都是单独的 AngularJS 应用程序，并且在父文档中输入的文本值在更改到 iframe 时发送，在那里运行的 AngularJS 应用程序会将数据放入范围.
http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk
So...for example, I am trying to pull in an email "template" into an iframe as a "preview" for the user inside of an angularjs app. The iframe lives inside of the controller area (let's call it MainCtrl). The user would then be able to, using the form elements provided inside MainCtrl, update the preview based on their input. So for example let's say our template being pulled into the iframe looks something like this:
<!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>
So inside our index.html (angularjs app), we would have form elements bound to {{header}} and {{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>
is that possible? Is it possible for angularjs to update that information, and if so, how? I have something similar setup, and seems that it will not work. I cannot get the angularjs expressions to evaluate...all that shows up is {{body}}, etc...
If you run the iframe and the parent document from the same domain name (so that no Cross-Site-Scripting-Restrictions apply) then you can call a JavaScript function in the iframe which you could pass data.
What you might be missing is that the iframe is a separate document from the viewpoint of the browser. So if this iframe should run AngularJS code, you will need to make it a separate AngularJS application.
Here is a example where both the parent document and the iframe are separate AngularJS applications and the value of a text input in the parent is sent upon change to the iframe where the AngularJS application running there will put the data into the scope.
http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk
这篇关于是否可以在 iframe 内更新 angularjs 表达式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
