带有 css 的角度 HTML 预览答案

【问题标题】：angular HTML preview with css带有 css 的角度 HTML 预览
【发布时间】：2015-03-28 05:24:41
【问题描述】：

我正在使用 Angular js 构建应用程序，它具有在用户在 textarea 上编写 html 后直接显示 HTML 预览的功能。但是当用户在 textarea 上输入样式时，我坚持如何为 html 本身隔离 css。预览中的 HTML css 不应覆盖主 css。

这是我的截图：

显示html预览的指令：

app.directive('htmlViewer', ['$sce', function($sce){
  return {
    scope: {
      htmlViewer: '=',
    },
    template: "<div ng-bind-html='trustedHtml'></div>",
    link: function($scope, iElm, iAttrs, controller) {
      $scope.updateView = function() {
        $scope.trustedHtml = $sce.trustAsHtml($scope.htmlViewer);
      }

      $scope.$watch('htmlViewer', function(newVal, oldVal) {
        $scope.updateView(newVal);
      });
    }
  };
}]);

和视图类似：

<div html-viewer="myHtmlModel.content"></div>

我应该怎么做才能实现该功能？所以 html 预览和它的 css 不会覆盖主应用程序的 css。抱歉，我对 Angular 比较陌生。

编辑这是我在 textarea 上的示例 html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Template</title>
        <style>

        /* -------------------------------------
        GLOBAL
        ------------------------------------- */
        body {
         -webkit-font-smoothing: antialiased;
         -webkit-text-size-adjust: none;
         width: 100%;
         min-width:300px;
         max-width:680px;
         margin:0 auto;
         height: 100%;
         background:#f6f6f6!important;
        }


        </style>
    </head>

    <body bgcolor="#f6f6f6">

       <!-- content -->
         <div class="content">
             Lorem ipsum dolor sit amet
         </div>
       <!-- /content --> 
     </body>
  </html>

非常感谢您的帮助或建议。

谢谢

解决方案

最后，我使用 iframe 来解决这个问题。通过创建新指令并与前一个指令结合。

app.directive('framePreview', function($compile) {
  return function($scope, $element) {
    var $body = angular.element($element[0].contentDocument.body),
        template  = $compile('<div html-viewer="myHtmlModel.content"></div>')($scope);
    $body.append(template);
  };
});

那么在我看来：

<iframe frame-preview="" width="100%" height="500px"></iframe>

【问题讨论】：

范围适用于模板/角度/控制器变量。不是 fot css 文件或样式。
请给我看看你在 textarea 中写的示例 html 吗？
@Asik，刚刚用示例 html 更新了问题

标签： css angularjs angularjs-directive

【解决方案1】：

可以改用 iframe 吗？ jsFiddle、jsBin 等网站也使用 iframe 进行代码预览

【讨论】：

感谢您的建议。但是除了使用 iFrame 之外，还有其他解决方案吗？
我接受了这个答案，因为我使用的是 iframe。谢谢！
很高兴我能帮上忙！ :)