Conditionnellement à rendu css dans le html de la tête

Je suis en train d'ajouter dynamiquement des css de mon code html tête à l'aide de angular js. Voici un exemple de code

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

Ce code fonctionne comme prévu, mais lorsque le navigateur charge la page, il tente d'extraire des ressources css avec raw angularjs modèles et je vois "erreur" 404 not found" dans l'onglet réseau de firebug.

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

Lorsque la page est complètement chargée, il ne la substitution des valeurs de modèle et de charges de la bonne css.

Est-il un moyen d'éviter l'erreur 404 et faire le charger le css après angularjs traitement?

InformationsquelleAutor Raja | 2012-08-11
  1. 31

    Vous devez utiliser ng-href au lieu de href.

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

    Exemple

    InformationsquelleAutor Artem Andreev
  2. 7

    J'ai fait un AngularJS service pour utiliser facilement le @Artem solution.

    C'est ici sur GitHub.

    • génial, j'espère que l'angulaire de la communauté de partager et d'amasser le même écosystème que les plugins jquery, n'a-
    • C'est assez cool! J'aime votre service fait. il est assez facile à utiliser et singlePageMode fonctionne bien! Merci
    InformationsquelleAutor Gabriel
  3. 2

    Il y a une autre option à l'aide de $route.résoudre et de promesses. Cela permettra d'attendre jusqu'à ce que le CSS est chargé non seulement ajouté à l'en-tête (après que le navigateur commence juste de récupérer le fichier et en fonction CSS taille peut causer la page de redistribution).

    //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'
  });
})

    Service de la mise en œuvre

    .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;
}])

    Vous pouvez ajouter un délai d'attente à l'aide de tente si c'est quelque chose que vous souhaitez inclure.

    Découvrez ce post pour plus de détails:https://medium.com/angularjs-meetup-south-london/angular-dynamically-injecting-css-file-using-route-resolve-and-promises-7bfcb8ccd05b

    InformationsquelleAutor Gerard Sans
  4. 2

    J'ai créé un exemple très simple de comment faire un conditionaly css plus

    <link rel="stylesheet" ng-if="lang_direction == 'rtl'" ng-href="{{lang_direction == 'rtl' ? 'css/rtl.css' : ''}}" >
    • Exactement ce que je recherche.merci
    • un plaisir de vous aider 🙂
    InformationsquelleAutor Michael Kisilenko
  5. 0

    Pour tous ceux qui souhaitent créer véritablement CSS dynamique lors de l'exécution avec AngularJS c'est ce que j'ai utilisé.

    index.html

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

    cssService

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

    C'est juste un exemple, il peut être préférable pour vous de mettre les styles dans un indexController si vous en avez un et le garder hors de la $rootScope

    InformationsquelleAutor Chris