Menu
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>
752
May be use iframe instead? Sites like jsFiddle, jsBin use iframe for code preview as well
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
