8

所以......例如，我试图将电子邮件“模板”拉入 iframe，作为 angularjs 应用程序内用户的“预览”。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 回答