html head 中的条件渲染 css答案

【问题标题】：Conditionally-rendering css in html headhtml head 中的条件渲染 css
【发布时间】：2012-08-08 09:14:51
【问题描述】：

我正在尝试使用 Angular js 将 css 动态添加到我的 html 头部。这是示例代码

<div ng-repeat="stylesheet in stylesheets">
        <link href="/myapp/{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" media="{{stylesheet.media}}" title="{{stylesheet.title}}" />
</div>

此代码按预期工作，但是当浏览器加载页面时，它会尝试使用原始 angularjs 模板获取 css 资源，并且我在 firebug 的网络选项卡中看到“404 not found error”。

Eg: request http://localhost:8080/myapp/%7B%7Bstylesheet.href%7D%7D, status 404

当页面完全加载时，它会替换模板值并加载正确的 css。

有没有办法避免 404 错误并使其在 angularjs 处理后加载 css？

【问题讨论】：

标签： html css angularjs

【解决方案1】：

你应该使用ng-href而不是href。

<link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" />

Example

【讨论】：

【解决方案2】：

我创建了一个 AngularJS 服务，以便轻松使用 @Artem 解决方案。

It's here on GitHub.

【讨论】：

太棒了，我希望 Angular 社区能够分享和积累与 jquery 插件相同的伟大生态系统-
这很酷！我喜欢你的服务。它非常易于使用，并且 singlePageMode 效果很好！谢谢

【解决方案3】：

还有一个使用 $route.resolve 和 promises 的选项。这将等到 CSS 实际加载后才添加到头部（之后浏览器才开始检索文件，并且根据 CSS 大小可能会导致页面重排）。

// Routing setup
.config(function ($routeProvider) {
  $routeProvider
  .when('/home', {
      controller: 'homeCtrl', 
      templateUrl: 'home.tpl.html'
  }).when('/users', {
      controller: 'usersCtrl', 
      controllerAs: 'vm',
      templateUrl: 'users.tpl.html',
      resolve: {
        load: ['injectCSS', function (injectCSS) {
          return injectCSS.set("users", "users.css");
        }]
      }
  }).otherwise({
      // default page
      redirectTo: '/home'
  });
})

服务实现

.factory("injectCSS", ['$q', '$http', 'MeasurementsService', function($q, $http, MeasurementsService){
  var injectCSS = {};

  var createLink = function(id, url) {
    var link = document.createElement('link');
    link.id = id;
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    return link;
  }

  var checkLoaded = function (url, deferred, tries) {
    for (var i in document.styleSheets) {
      var href = document.styleSheets[i].href || "";
      if (href.split("/").slice(-1).join() === url) {
        deferred.resolve();
        return;
      }
    }
    tries++;
    setTimeout(function(){checkLoaded(url, deferred, tries);}, 50); 
  };

  injectCSS.set = function(id, url){
    var tries = 0,
      deferred = $q.defer(),
      link;

    if(!angular.element('link#' + id).length) {
      link = createLink(id, url);
      link.onload = deferred.resolve;
      angular.element('head').append(link);
    }
    checkLoaded(url, deferred, tries);

    return deferred.promise;
  };

  return injectCSS;
}])

如果您想包含这些内容，您可以使用尝试添加超时。

【讨论】：

【解决方案4】：

我创建了一个非常简单的示例，说明如何进行有条件的 CSS 添加

<link rel="stylesheet" ng-if="lang_direction == 'rtl'" ng-href="{{lang_direction == 'rtl' ? 'css/rtl.css' : ''}}" >

【讨论】：

【解决方案5】：

对于任何希望在运行时使用 AngularJS 创建真正动态的 CSS 的人，这是我使用的。

index.html

<head> <style type="text/css" ng-bind-html="styles"></style> </head>

cssService

this.$rootScope.myStyles = ".test { color : red; }";

这只是一个例子，如果你有一个 indexController 并把它放在$rootScope 之外，你最好把它放在一个 indexController 中

【讨论】：