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

Question

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

kev*_*eon 8 html javascript iframe angularjs

所以...例如,我试图将一个电子邮件"模板"拉入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>

Run Code Online (Sandbox Code Playgroud)

因此,在我们的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>

Run Code Online (Sandbox Code Playgroud)

那可能吗？angularjs是否可以更新该信息,如果是,如何更新？我有类似的设置,似乎它不会工作.我无法得到angularjs表达式来评估...显示的所有内容都是{{body}}等等......

Answer 1

Jul*_*lzt 12

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

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

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

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

归档时间：	12 年，1 月前
查看次数：	8839 次
最近记录：	11 年，9 月前