So che questa domanda è vecchia ora, ma dopo aver fatto un sacco di ricerche su varie soluzioni a questo problema, penso che potrei aver trovato una soluzione migliore.
AGGIORNAMENTO 1: Da quando ho pubblicato questa risposta, ho aggiunto tutto questo codice a un semplice servizio che ho pubblicato su GitHub. Il repository si trova qui . Sentiti libero di provarlo per maggiori informazioni.
AGGIORNAMENTO 2: questa risposta è ottima se tutto ciò di cui hai bisogno è una soluzione leggera per inserire fogli di stile per i tuoi percorsi. Se si desidera una soluzione più completa per la gestione dei fogli di stile su richiesta in tutta l'applicazione, è possibile verificare il progetto AngularCSS di Door3 . Fornisce funzionalità molto più dettagliate.
Nel caso qualcuno in futuro fosse interessato, ecco cosa mi è venuto in mente:
1. Creare una direttiva personalizzata per l' <head>elemento:
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;
});
}
});
}
};
}
]);
Questa direttiva fa le seguenti cose:
- Compila (usando
$compile) una stringa html che crea un set di <link />tag per ogni elemento scope.routeStylesnell'oggetto usando ng-repeateng-href .
- Aggiunge il set di
<link />elementi compilato al <head>tag.
- Quindi utilizza il
$rootScopeper ascoltare gli '$routeChangeStart'eventi. Per ogni '$routeChangeStart'evento, prende l' $$routeoggetto "corrente" (la rotta che l'utente sta per lasciare) e rimuove i suoi file CSS specifici parziale dal <head>tag. Afferra anche l' $$routeoggetto "successivo" (la rotta verso cui l'utente sta per andare) e aggiunge uno dei suoi file css specifici al parziale al <head>tag.
- E la
ng-repeatparte del <link />tag compilato gestisce tutta l'aggiunta e la rimozione dei fogli di stile specifici della pagina in base a ciò che viene aggiunto o rimosso scope.routeStylesdall'oggetto.
Nota: ciò richiede che l' ng-appattributo sia <html>sull'elemento, non su <body>o all'interno di esso <html>.
2. Specificare quali fogli di stile appartengono a quali percorsi utilizzando $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']
})
}]);
Questa configurazione aggiunge una cssproprietà personalizzata all'oggetto che viene utilizzata per impostare il percorso di ciascuna pagina. Quell'oggetto viene passato a ciascun '$routeChangeStart'evento come .$$route. Quindi, quando ascoltiamo l' '$routeChangeStart'evento, possiamo prendere la cssproprietà che abbiamo specificato e aggiungere / rimuovere quei <link />tag secondo necessità. Si noti che specificare una cssproprietà sul percorso è completamente facoltativo, poiché è stato omesso '/some/route/2'dall'esempio. Se la route non ha una cssproprietà, la <head>direttiva semplicemente non farà nulla per quella route. Nota anche che puoi anche avere più fogli di stile specifici per pagina per rotta, come '/some/route/3'nell'esempio sopra, dove ilcss proprietà è una matrice di percorsi relativi ai fogli di stile necessari per quella rotta.
3. Il gioco è fatto
Queste due cose hanno impostato tutto ciò che era necessario e lo fa, secondo me, con il codice più pulito possibile.
Spero che possa aiutare qualcun altro che potrebbe avere problemi con questo problema tanto quanto me.
<link>tag CSS in questo formato , con l'ultimo Chrome, il server sul mio computer locale (e "Disabilita cache" per simulare le condizioni di "primo caricamento"). Immagino che pre-inserire un<style>tag nel parziale html sul server eviterebbe questo problema.