主窗口和 iframe 窗口的 AngularJs 相同模型答案

【问题标题】：AngularJs same model for main window and iframe window主窗口和 iframe 窗口的 AngularJs 相同模型
【发布时间】：2014-03-12 17:18:17
【问题描述】：

我试图在单击主窗口上的某个链接时打开一个新的 iframe 窗口。但是，我想使用相同的模型，即如果主窗口中的数据发生变化，它应该反映在 iframe 中，反之亦然。主窗口 UI 将包含几个字段，而 iFrame 窗口将包含所有字段。

我对 angujar 世界很陌生，这可行吗？如果是，有什么建议吗？

【问题讨论】：

不要认为这真的是 AngularJS 特有的问题，而是你需要看看如何通过 javascript 与 iFrame 进行通信，如果你能做到这一点，那么角度部分应该相对没有实际意义。
由于您是 AngularJS 的新手，您是否考虑过将 ng-include 指令作为 iframe 的替代品？它可以将单独的 html 模板和逻辑保存到父页面，但两者通过 Angular 的范围（父范围和根范围）连接
你为什么使用和 iFrame？
@shaunhusain 同意，这不是 Angular 特有的，只是想看看使用 Angular 是否有帮助，因为我已经在使用 Angular。
@LcLk 这可能是一个很好的解决方案。基本上我希望两个窗口在两个不同的屏幕上，因此像模态窗口这样的东西不起作用。如果您有任何虚拟示例，那就太棒了！

【解决方案1】：

使用ngInclude 指令，一个angularjs 页面上的多个模板的概念是微不足道的。

ngCompile 示例显示了一个可拖动的 div。

在可拖动元素中放置一个 ng-include 应该很容易。您还可以对整个页面使用相同的控制器，包括ngInclude，从而无需通过service 或factory 共享数据。

编辑：

我创建了一个简单的JS Fiddle 显示单个模板。如您所见，输入字段位于主页中。然后带有 ng-include 指令的 div 会加载一个内联模板（实际上这些模板将是完全独立的 html 页面）。

由于包含的模板没有单独的控制器（这是可能的，并且常用），它在父控制器的范围内。因此模板可以访问name.first 和name.last 变量。

您将通过angularjs tutorial了解更多信息

【讨论】：

我不确定 ng-include 将如何帮助跟踪不同窗口中的更改。例如，第一个窗口有名为 FirstName 的字段，单击编辑将打开包含 FirstName 和 LastName 的新窗口，如何在第一个窗口中反映此更改？我正在考虑将值存储到 localStorage 并监听该 localStorage 的值更改，以便在主窗口或新窗口更改时更新 UI。

【解决方案2】：

不，你不能。新的 iFrame 在不同的上下文中运行。如果 iFrame 来自不同的域，则 iFrame 和父级之间也存在安全限制。

您可以做的是使用 html5 postmessage 在父级和 iframe 之间实现一个消息传递系统。您可以在主窗口中监视范围的更改，将更改通知子级并更新子级的范围。

【讨论】：