javascript - 可以下载样式表并将其应用于 Angular ngBindHtml 吗？

Question

我使用的是 angular 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。但是我没有正确的格式。

我需要做的事情

1. 获取不是来 self 的服务器的 css。 (应该不会遇到 css 的跨站点脚本问题，对吧？)
2. 仅将它应用到 html 片段(而不是覆盖我网站的默认 css)
3. 防止 html 中任何伴随的 javascript 运行

这可能吗？

Answer 1

要将 css 样式表添加到“html 片段”可以使用 shadow dom 来完成.然而，并非所有浏览器都支持 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