可以下载样式表并将其应用于角度 ngBindHtml？答案

【问题标题】：Possible to download and apply stylesheet to angular ngBindHtml?可以下载样式表并将其应用于角度 ngBindHtml？
【发布时间】：2017-03-10 08:15:05
【问题描述】：

我正在使用角度 1.6。我正在从我的 nodejs 服务器动态提取 html 并将其写入页面上的 div 中。

<p ng-bind-html="htmlSource"></p>

$scope.htmlSource = '<link rel="stylesheet" type="text/css" href="http://NOT-MY-SERVER/style.css"><div class='specialcss'></div>';

我能够很好地显示呈现的 html。但我没有正确的格式。

我需要做的事情

获取 css，它不是来自我的服务器。（应该不会遇到 css 的跨站脚本问题吧？）
仅将其应用于 html sn-p（而不是覆盖我网站的默认 css）
阻止 html 中的任何附带的 javascript 运行

这可能吗？

【问题讨论】：

我刚刚尝试过，没有任何问题...查看jsFiddle
你在使用$sce（严格上下文转义）服务吗？
@The.Bear 似乎 $sce.trustAsHtml() 是关键，因为我看到正在下载的 .css 文件。有没有办法将样式包含在这个 html 中，这样它就不会影响我页面的其余部分？
另外，添加了第三个要求。我可以阻止/不信任 html 中的 javascript 吗？
关于仅将样式应用于一个部分... css 应用于整个文档，我没有看到任何简单的解决方案（至少据我所知）。如果您可以操作服务器 css 文件，我认为如果您对所有 css 规则使用唯一的 #id 并将该唯一 #id 放入具有 ng-bind-html 的 div 中，这是一种更好的方法

标签： javascript html css angularjs node.js

【解决方案1】：

可以使用shadow dom 将css 样式表添加到“html sn-p”。但是，并非所有浏览器都支持 shadow dom。它看起来像这样：

var $compile = angular.element('body').injector().get('$compile');
var div = document.createElement('div');
var innerHtml = '<div ng-bind-html='myTemplate.html"/>'
innerHtml+='<link rel="stylesheet" type="text/css" href="http://NOT-MY-SERVER/style.css">';
var shadow = div.attachShadow({mode: 'open'});
shadow.innerHTML=innerHTML;
var element = $compile(shadow)(angular.element('body').scope());
angular.element('#parentElementInDomWhereYouWantYourTemplate').append(element)

如果样式表未托管在您的服务器上，或者访问样式表的服务器未列入白名单，则该样式表只会导致 CORS 问题。

Plunkr

【讨论】：

Shadow DOM 似乎很有希望，但我不完全理解您的代码，无法让它工作。什么是 myTemplate.html？你能再解释一下代码吗？
myTemplate.html 是您的 HTML 源代码。我在提供的代码中所做的是创建一个 HTML 元素，使其成为阴影 dom 根，这是带有附加阴影的行，然后设置内部 HTML。由于内部 HTML 包含一个角度指令（ng-bind-html），因此您需要重新编译它才能执行该指令。
实际上，我查看了您的 Plunkr 并让它工作了！