【问题标题】:Getting an AngularJS directive to work in an iframe让 AngularJS 指令在 iframe 中工作
【发布时间】:2014-03-13 01:45:34
【问题描述】:

我正在尝试让一个角度指令在 iframe 内运行。 iframe 不是来自外部域,因此需要包含 iframe 的应用的样式不会应用于 iframe 中的内容。

Here is a simple Plunker 我需要做什么。

正如您所见,带有 my-draggable 指令功能的元素在 iframe 之外但不在 iframe 之内。

据我所知,它们被认为具有相同的来源,因此父页面能够将内容注入 iframe。我还尝试为 iframe 和父页面设置 document.domain。结果相同。

这是同源政策问题还是与 Angular 范围有关?

【问题讨论】:

  • 你真的希望 Angular 在 iframe 容器和 iframe 内容之间继续范围继承吗?您将需要单独的应用程序并管理两者之间的通信。见stackoverflow.com/questions/19125910/…
  • 是的,我想继续并在应用程序和 iframe 之间共享范围。这个想法是将应用程序中所做内容的预览加载到 iframe 中。然后,用户可以通过拖动对象来操作预览,并将这些更改传达回应用程序。
  • @andypants 你能找到解决方案吗?我正在寻找类似的东西......

标签: javascript angularjs iframe


【解决方案1】:

Angular 在编译阶段不会进入 iframe,因为 iframe 是一个单独的 DOM。从理论上讲,您可以将ifrm.innerWindow.document.body 传递给$compile,然后将其链接到新范围。但是到那时,您的 iframe 已经变得非常笨拙了 ngInclude,那么为什么不直接使用它呢?

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多