避免在样式表加载ng-href之前显示内容

Question

我想使用ng-href加载不同的主题。

问题是在应用样式表之前会显示无样式的内容。

如果您比较最后3个版本，我制作了Plunker，我刚刚更改了第8行

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link ng-href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link ng-href="//netdna.bootstrapcdn.com/bootstrap/{{styleVersion}}/css/bootstrap.min.css" rel="stylesheet">

如果我使用ng-href代替href，您可以看到无格式的HTML，我需要避免这一点。

所以我的问题是，如果有可能等到样式表加载或者是否有更好的解决方案来解决这个问题，那么ng-href

Answer 1

我根据Plunker

上的反馈编辑了Dynamically loading CSS in angularjs (loading delay)

基本上它做了三件事：

1. 使用以下命令加载start.css文件：

   isUnique: {
       array: events,
       predicate: function(currentEvent, currentValue) {
         return currentEvent.name() === currentValue;
       }
   }
   

2. 加载ng-href css
3. 加载一个end.css文件，将文件样式设置回html, body{ display: none }

这是一个黑客，但似乎有效。