更新:下面添加了解决方案作为答案
我正在使用 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 有什么建议吗??
最佳答案
您将无法使用 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 创建单独页面的方法。
关于html - 使用 angularJS 从用户输入的 CSS 和 HTML 创建预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34926664/