Question

所以...例如，我试图将一个电子邮件“模板”拉入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 app）中，我们将表单元素绑定到{{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}}等等......

Answer 1

如果您运行iframe和来自同一域名的父文档（以便不应用跨站点脚本限制），那么您可以在iframe中调用可以传递数据的JavaScript函数。

您可能缺少的是iframe是一个单独的文档，从浏览器的角度来看。因此，如果此iframe应运行AngularJS代码，则需要将其作为单独的AngularJS应用程序。

下面是一个示例，其中父文档和iframe都是单独的AngularJS应用程序，并且在更改为iframe时将父文本输入的值发送到其中运行的AngularJS应用程序将数据放入范围。

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

Answer 2

从浏览器的角度来看，角度没有什么特别之处 - 这是javascript，这一切都很重要。所以我会说你的问题的答案是 - 是的，它应该有用。

当然，同一原产地政策的约束将适用。异步性也可能存在一些问题，但除此之外它应该起作用

是否可以更新iframe内的angularjs表达式？

2 个答案: