使用 CSS 进行角度 HTML 预览

我正在使用角度js构建应用程序，它具有在用户在文本区域上编写html后直接显示HTML预览的功能。但是当用户在文本区域上输入样式时，我坚持如何隔离 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。对不起，我对棱角相对陌生。

编辑这是我在文本区域上的示例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>

可以使用 iframe 代替？像jsFiddle，jsBin这样的网站也使用iframe进行代码预览。

相关内容

最新更新

热门标签：