Question

我正在使用角度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。对不起，我对角色很新。

修改这是我在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>

Answer 1

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

使用css进行角度HTML预览

1 个答案: