angular HTML preview with css

Question

I'm building app using angular js and it has feature to displays HTML preview directly after user wrote the html on the textarea. But i'm stuck on how to isolate css for the html itself when user input style on the textarea. HTML css on the preview should not override the main css.

Here is my snipped :

Directive to displays the html preview :

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);
      });
    }
  };
}]);

and the view something like :

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

What should I do to achieve the feature? So html preview and its css not override the main app's css. Sorry I'm relative new to angular.

EDIT This is my sample html on textarea

    <!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>

Really appreciate your help or suggestion.

Thanks

SOLUTION

At the end, i'm using iframe to solve this. By creating new directive and combine with the previous one.

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);
  };
});

Then on my view :

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

scope works for template/angular/controller variables. not fot css files or styles. — levi
– levi, Commented Jan 29, 2015 at 4:32

OmomSun · Accepted Answer · 2015-01-29 05:46:53Z

1

May be use iframe instead? Sites like jsFiddle, jsBin use iframe for code preview as well

answered Jan 29, 2015 at 5:46

OmomSun

3372 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ardian Over a year ago

Thanks for your suggestion. But are there any other solutions instead of using iFrame?

Ardian Over a year ago

I accepted this answer since i'm using iframe. thanks!

Collectives™ on Stack Overflow

angular HTML preview with css

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related