是否有可能以更新的iframe内angularjs前pressions？ [英] Is it possible to update angularjs expressions inside of an iframe?
问题描述
所以...例如，我试图在一封电子邮件中的模板拉进一个iframe作为一个preVIEW为angularjs应用程序内的用户。 iframe的生活在控制器区域内（让我们叫它MainCtrl）。然后，用户将能够使用内部MainCtrl提供的表单元素，更新基于其输入preVIEW。因此，例如，假设被拉到我们的模板到iframe中看起来是这样的：
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>
因此，我们的index.html（angularjs应用程序）里面，我们必须绑定到表单元素{{}头}和{{身体}} ...
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>
这可能吗？是否有可能为angularjs更新这些信息，如果有的话，怎么样？我有一些类似的设置，似乎这是行不通的。我不能让angularjs前pressions评估......一切显示出来是{{身体}}，等等...
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...
推荐答案
如果您运行的iframe，并从同一域名的父文档（所以没有跨站点脚本有不同的限制），那么你可以调用JavaScript功能在其中，你可以传递数据的iframe。
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.
你也许缺少的是，iframe是从浏览器的角度看一个单独的文件。因此，如果这IFRAME应该运行AngularJS code，你需要使它成为一个独立的应用程序AngularJS
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.
下面是其中两个父文档和iframe中是独立的AngularJS应用和父文本输入的值变化时被送到了iframe的地方在那里运行的AngularJS应用程序将数据输入范围的例子。
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前pressions？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
