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

Question

更新:下面添加了解决方案作为答案

我正在使用 angularJS 和 Ace 编辑器构建一个片段管理器。我有两个 CSS 和 HTML 选项卡，我想根据用户的输入制作一个预览选项卡，类似于 http://bootsnipp.com/ 的方式。作品。我通过将 CSS 代码注入(inject)样式标签来进行预览:

<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 创建一个全新页面的问题。答案是“用另一种方式做你想做的事”，但问题本身似乎包含一种使用 Angular 创建单独页面的方法。