Javascript 如何让angularJS动态内容显示在iframe中？

我正在AngularJS中使用

ng repeat

生成一些表格内容，我希望将此内容显示在iframe中，以便用户可以拖动它并调整其大小

我不能使用iframe

src

属性，因为这需要一个URL，我正在客户端上生成内容

我可能需要一些

srcdoc

的变体，但似乎需要一行带引号的html代码

---

如何构造iframe，使生成的内容显示在iframe中？

您可以将AngularJS表添加到iframe中。该支持仅限于HTML5，但看起来是这样的：

HTML

可以使用

srcdoc

属性代替

src

来指示您将为内容提供代码。当您使用

srcdoc

时，也需要无缝；它告诉浏览器iframe的内容应该被视为网站的一部分，而不是嵌套的内容。不幸的是，这将触发样式更改，从而消除您首先需要iframe的全部原因（调整大小手柄消失）。此外，您还必须将css文件和javascript文件注入iframe——这不值得

我建议使用jQuery UI Resizeable之类的工具：

---

这是我用来测试控制iframe内容的小提琴。这是非常基本的，但准确地说明了它们实际上有多麻烦：

除非您可以将内容传递到与iframe相适应的不同页面上的单独Angle应用程序，否则这将不起作用。没有办法在iframe上执行双向绑定。您看到了吗？您可能会发现这个问题很有用。下面是关于

ng repeat

与

iframe

的示例，但这不接受角度重复。谢谢你的尺寸调整。将尝试将其与draggable结合起来，看看jQuery或iframe会弹出什么？我使用AngularJS生成内容，而不是jQuerysure，但您可以在角度投影中使用jQuery。我知道，我在其他地方使用jQuery。我的观点是，这个特定的内容是从Angular而不是jQuery生成的，所以我想将Angular生成的内容填充到iframe中

<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>

document.getElementById("frame").contentWindow.document.getElementById("mydiv")