Je sais que cette question est ancienne maintenant, mais après avoir fait une tonne de recherches sur diverses solutions à ce problème, je pense que j'ai peut-être trouvé une meilleure solution.
MISE À JOUR 1: Depuis la publication de cette réponse, j'ai ajouté tout ce code à un service simple que j'ai publié sur GitHub. Le repo se trouve ici . N'hésitez pas à le consulter pour plus d'informations.
MISE À JOUR 2: Cette réponse est excellente si tout ce dont vous avez besoin est une solution légère pour extraire des feuilles de style pour vos itinéraires. Si vous souhaitez une solution plus complète pour gérer les feuilles de style à la demande dans toute votre application, vous pouvez consulter le projet AngularCSS de Door3 . Il fournit des fonctionnalités beaucoup plus fines.
Au cas où quelqu'un dans le futur serait intéressé, voici ce que j'ai proposé:
1. Créez une directive personnalisée pour l' <head>élément:
app.directive('head', ['$rootScope','$compile',
function($rootScope, $compile){
return {
restrict: 'E',
link: function(scope, elem){
var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
elem.append($compile(html)(scope));
scope.routeStyles = {};
$rootScope.$on('$routeChangeStart', function (e, next, current) {
if(current && current.$$route && current.$$route.css){
if(!angular.isArray(current.$$route.css)){
current.$$route.css = [current.$$route.css];
}
angular.forEach(current.$$route.css, function(sheet){
delete scope.routeStyles[sheet];
});
}
if(next && next.$$route && next.$$route.css){
if(!angular.isArray(next.$$route.css)){
next.$$route.css = [next.$$route.css];
}
angular.forEach(next.$$route.css, function(sheet){
scope.routeStyles[sheet] = sheet;
});
}
});
}
};
}
]);
Cette directive fait les choses suivantes:
- Il compile (en utilisant
$compile) une chaîne html qui crée un ensemble de <link />balises pour chaque élément de l' scope.routeStylesobjet en utilisant ng-repeatet ng-href.
- Il ajoute cet ensemble d'
<link />éléments compilés à la <head>balise.
- Il utilise ensuite le
$rootScopepour écouter les '$routeChangeStart'événements. Pour chaque '$routeChangeStart'événement, il saisit l' $$routeobjet "courant" (la route que l'utilisateur est sur le point de quitter) et supprime son ou ses fichiers css spécifiques partiels de la <head>balise. Il saisit également l' $$routeobjet "suivant" (la route vers laquelle l'utilisateur est sur le point de se rendre) et ajoute l'un de ses fichiers css partiellement spécifiques à la <head>balise.
- Et la
ng-repeatpartie de la <link />balise compilée gère tous les ajouts et suppressions de feuilles de style spécifiques à la page en fonction de ce qui est ajouté ou supprimé de l' scope.routeStylesobjet.
Remarque: cela nécessite que votre ng-appattribut soit sur l' <html>élément, pas sur <body>ou quoi que ce soit à l'intérieur de <html>.
2. Spécifiez quelles feuilles de style appartiennent à quels itinéraires à l'aide de $routeProvider:
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'
})
.when('/some/route/2', {
templateUrl: 'partials/partial2.html',
controller: 'Partial2Ctrl'
})
.when('/some/route/3', {
templateUrl: 'partials/partial3.html',
controller: 'Partial3Ctrl',
css: ['css/partial3_1.css','css/partial3_2.css']
})
}]);
Cette configuration ajoute une csspropriété personnalisée à l'objet utilisé pour configurer l'itinéraire de chaque page. Cet objet est transmis à chaque '$routeChangeStart'événement en tant que .$$route. Ainsi, lors de l'écoute de l' '$routeChangeStart'événement, nous pouvons récupérer la csspropriété que nous avons spécifiée et ajouter / supprimer ces <link />balises si nécessaire. Notez que la spécification d'une csspropriété sur l'itinéraire est complètement facultative, car elle a été omise de l' '/some/route/2'exemple. Si la route n'a pas de csspropriété, la <head>directive ne fera simplement rien pour cette route. Notez également que vous pouvez même avoir plusieurs feuilles de style spécifiques à une page par itinéraire, comme dans l' '/some/route/3'exemple ci-dessus, où la csspropriété est un tableau de chemins relatifs vers les feuilles de style nécessaires pour cet itinéraire.
3. Vous avez terminé.
Ces deux choses configurent tout ce qui était nécessaire et il le fait, à mon avis, avec le code le plus propre possible.
J'espère que cela aidera quelqu'un d'autre qui pourrait être aux prises avec ce problème autant que moi.
<link>balises css dans ce format , avec le dernier Chrome, le serveur sur ma machine locale (et "Désactiver le cache" pour simuler les conditions de "premier chargement"). J'imagine que pré-insérer une<style>balise dans le partiel html sur le serveur éviterait ce problème.