Question

我们有一个使用angular构建的单页应用，其中包含各种功能。

其中一项功能是代码片段的拖放界面。这些片段中的每一个都有自己的样式，这些样式与管理面板的其余部分分开设计。

应用程序的主要部分使用引导主题设置样式，但拖放片段不是，因此当导航到拖放部分时，片段继承了一些引导样式。

这会导致各种问题样式明智，我正在寻找理想的解决方案，而不使用iframe或不得不覆盖引导程序样式。理想情况下，我们会卸载引导程序，然后只加载新样式，或者让新内容不继承样式。

无论如何都可以在不重新加载应用或使用iframe的情况下实现此目的吗？切换样式表或在页面中注入新样式并删除其他样式？

Answer 1

我可以想到两个选择：

删除样式表元素
在显示有问题的内容之前，请删除LINK元素（值得将其作为参考以供日后使用。
```
var element = document.querySelector('link[href~="bootstrap.css"]'); 
document.removeChild(element);
```
当您想要返回Bootstrap样式时，您可以重新添加它。
```
document.head.appendChild(bootstrapLinkElement);
```
覆盖Bootstrap CSS规则
创建一组覆盖和/或重置Bootstrap规则的规则。您可以将它们嵌套在父选择器下（例如.no-bootstrap），这样它们只会影响特定元素为了方便起见，您可以获得Bootstraps预编译的源代码（LESS或SASS）并对其进行编辑以包含覆盖样式表。

编辑：修正错误

Answer 2

不确定是否是您问题的确切答案，但您可以尝试：

<link rel="stylesheet" ng-href="/{{snippet}}.css">

然后在你的控制器中：

$ rootScope.snippet =＆＃39; xxx＆＃39;;

Answer 3

我假设因为您有一个单页应用程序，您正在使用角度路由，因此可以将其设置为具有路由相关的样式表，您可以将其作为您的实现角色：

在页面标题中，您将包含以下内容：

<link rel="stylesheet" ng-href="{{css}}">

在你添加的每个路线中。

.when('/somepage, {
   templeteUrl: 'somepage.html',
   css: 'yourcss.css'
});

或者您可以查看我认为设置的angular-route-styles或here，但是将功能添加到$ routeProvider并提供了一种向路径添加多个CSS部分的方法。我觉得这是一个更有棱角的方法，感觉这个功能应该包含在角度基础中。