带有 css 的角度 HTML 预览
Posted
技术标签:
【中文标题】带有 css 的角度 HTML 预览【英文标题】：angular HTML preview with css 【发布时间】：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="" ></iframe>
【问题讨论】：
范围适用于模板/角度/控制器变量。不是 fot css 文件或样式。 请给我看看你在 textarea 中写的示例 html 吗？ @Asik，刚刚用示例 html 更新了问题 【参考方案1】：可以改用 iframe 吗？ jsFiddle、jsBin 等网站也使用 iframe 进行代码预览
【讨论】：
感谢您的建议。但是除了使用 iFrame 之外，还有其他解决方案吗？ 我接受了这个答案，因为我使用的是 iframe。谢谢！ 很高兴我能帮上忙！ :)以上是关于带有 css 的角度 HTML 预览的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript css 或 html attr 禁用 iOS 链接预览