如何在HTML的head元素内有条件地呈现CSS和JavaScript

Question

I need to use two different styles for two different looks of a page and I need different CSS and JavaScript files for that. 我需要为页面的两种不同外观使用两种不同的样式，并且为此需要不同的CSS和JavaScript文件。 Is there anyway I could conditionally render CSS and JavaScript files inside the head element in an html file? 无论如何，我是否可以在html文件的head元素内有条件地呈现CSS和JavaScript文件？

I am working on an AngularJS application with Angular UI-Router module. 我正在使用Angular UI-Router模块开发AngularJS应用程序。

<html lang="en" ng-app="myApp">
  <head>

    <!-- if {{$state.current.name}} is "front" then list these CSS files -->
    <!-- if {{$state.current.name}} is "admin" then list these CSS files -->

  </head>
  <body>
    <!-- ... -->
    <!-- if {{$state.current.name}} is "front" then list these JavaScript files -->
    <!-- if {{$state.current.name}} is "admin" then list these JavaScript files -->
  </body>
</html>

Could somebody help me with it? 有人可以帮我吗？

Answer 1

I played around a bit and came up with this gist . 我玩了一下，想出了这个要点。 From index.html you can see that what you want can be achieved using the ngIf, ngSrc, and ngHref directives as I suggested in my comment. 从index.html可以看到，可以使用ngIf，ngSrc和ngHref指令来实现所需的目标，正如我在注释中所建议的那样。 From index-grouped.html you can see that you can indeed group <link> and <script> tags that need to appear under the same condition, but I'm not sure whether my approach works cross-browser. 从index-grouped.html可以看到，您确实可以将需要在相同条件下出现的<link>和<script>标记分组，但是我不确定我的方法是否可以跨浏览器使用。 I only tried Google Chrome. 我只尝试了谷歌浏览器。

Anyway, having two <head> elements is not valid HTML. 无论如何，具有两个<head>元素不是有效的HTML。 You can verify this yourself using an online validator . 您可以使用在线验证器自行验证。

I hope this helps. 我希望这有帮助。

如何在HTML的head元素内有条件地呈现CSS和JavaScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-14 22:52:24

如何在HTML的head元素内有条件地呈现CSS和JavaScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-14 22:52:24

解决方案1
1 已采纳 2014-09-14 22:52:24