Question

更新：以下添加的解决方案为答案

我正在使用angularJS和Ace编辑器构建一个片段管理器。我有两个CSS和HTML选项卡，我想根据用户的输入创建一个预览选项卡，类似于http://bootsnipp.com/的工作方式。我有一个预览工作，将CSS代码注入样式标记：

<div>
    <style>
        {{snippetsCtrl.snippet.css}}
    </style>
    <div ng-bind-html="snippetsCtrl.snippet.html">

    </div>
</div>

但我知道这是一个坏主意，它会影响应用程序的其余部分，例如，如果用户添加

body { display: none; }

屏幕变为空白。

我尝试使用iframe，但我无法弄清楚如何使iframe与angular一起工作。

那么有关如何获取$ scope中的代码并将其应用于iframe的任何建议？

Answer 1

您无法使用Angular修改iframe的内容 - 这是由于Same-Origin Policy。

我能想到的唯一方法是创建第二个页面，该页面实际上是空的，可以动态更新（不确定Angular的可能性如何，它确实可以用ASP实现）。从页面上的数据创建元素，使用详细信息填充第二页。然后使用angular将iframe的src更新为新页面：

How to set an iframe src attribute from a variable in AngularJS

编辑：有一个问题Here，它询问使用angular来创建一个全新的页面。答案是＆＃34;做你想做的另一种方式＆＃34;，但看起来问题本身包含了一种用Angular创建单独页面的方法。

Answer 2

好的，所以如果有人对此感兴趣的话，我设法将这些问题与之前的问题相结合：

Is it possible to update angularjs expressions inside of an iframe?

Access AngularJS service from a service inside a different frame

Angularjs: call other scope which in iframe

我所做的是将iframe创建为单独的Angular应用程序。要将范围发送到iframe应用程序，我在主应用程序控制器中使用了以下代码：

--depth

然后在iframe app.js文件中，我使用以下代码将检索到的数据添加到此应用程序的范围内。

snippetsCtrl.updateIframe = function () {
    document.getElementById('iframe').contentWindow.updatehtml(snippetsCtrl.snippet.html);

    document.getElementById('iframe').contentWindow.updatecss(snippetsCtrl.snippet.css);

};

这基本上就是我如何让它发挥作用，它有点乱，但我现在想做。

我遇到的一个问题是使用$ scope。$ apply，在我将其更新为$ applyAsync之前没有任何工作，不确定原因。

使用angularJS从用户输入的CSS和HTML创建预览

2 个答案: