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

【问题标题】：Create a preview from user inputed CSS and HTML using angularJS使用 angularJS 从用户输入 CSS 和 HTML 创建预览
【发布时间】：2016-04-27 20:53:14
【问题描述】：

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

我正在使用 angularJS 和 Ace 编辑器构建一个 sn-ps 管理器。我有两个用于 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 有什么建议吗？？

【问题讨论】：

标签： html css angularjs

【解决方案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 创建单独页面的方法。

【讨论】：

【解决方案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 应用程序，我在主应用程序控制器中使用了以下代码：

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

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

};

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

var app = angular.module('iframeApp', ['ngSanitize']);

app.controller('iframeCtrl', function ($scope) {

$scope.html = "<h1>Add Code to see preview here</h1>";
$scope.css = '';

window.updatehtml = function (snippet) {
    $scope.$applyAsync(function () {
        $scope.html = snippet;
    });
};
window.updatecss = function (snippet) {
    $scope.$applyAsync(function () {
        $scope.css = snippet;
    });
};

})

这基本上就是我让它工作的方式，它有点乱，但我认为现在可以。

我遇到的一个问题是使用 $scope.$apply，直到我将它更新为 $applyAsync 之前没有任何效果，不知道为什么。

【讨论】：