Ich weiß, dass diese Frage jetzt alt ist, aber nachdem ich eine Menge Nachforschungen über verschiedene Lösungen für dieses Problem angestellt habe, denke ich, dass ich vielleicht eine bessere Lösung gefunden habe.
UPDATE 1: Seit ich diese Antwort gepostet habe, habe ich den gesamten Code zu einem einfachen Dienst hinzugefügt, den ich auf GitHub gepostet habe. Das Repo befindet sich hier . Fühlen Sie sich frei, es für weitere Informationen zu überprüfen.
UPDATE 2: Diese Antwort ist großartig, wenn Sie nur eine leichte Lösung zum Einziehen von Stylesheets für Ihre Routen benötigen. Wenn Sie eine umfassendere Lösung für die Verwaltung von On-Demand-Stylesheets in Ihrer gesamten Anwendung wünschen, können Sie das AngularCSS-Projekt von Door3 ausprobieren . Es bietet viel feinkörnigere Funktionen.
Für den Fall, dass jemand in der Zukunft interessiert ist, habe ich mir Folgendes ausgedacht:
1. Erstellen Sie eine benutzerdefinierte Direktive für das <head>Element:
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;
});
}
});
}
};
}
]);
Diese Richtlinie bewirkt Folgendes:
- Es kompiliert (mit
$compile) einer HTML - Zeichenfolge , die eine Reihe von erstellt <link />Tags für jedes Element in dem scope.routeStylesObjekt verwendet ng-repeatund ng-href.
- Dieser kompilierte Satz von
<link />Elementen wird an das <head>Tag angehängt .
- Anschließend wird das verwendet
$rootScope, um auf '$routeChangeStart'Ereignisse zu warten . Bei jedem '$routeChangeStart'Ereignis wird das "aktuelle" $$routeObjekt (die Route, die der Benutzer gerade verlassen wird) erfasst und seine partiellspezifische CSS-Datei (en) aus dem <head>Tag entfernt. Es erfasst auch das "nächste" $$routeObjekt (die Route, zu der der Benutzer gehen wird) und fügt dem <head>Tag eine seiner teilspezifischen CSS-Dateien hinzu .
- Der
ng-repeatTeil des kompilierten <link />Tags übernimmt das Hinzufügen und Entfernen der seitenspezifischen Stylesheets basierend auf dem, was dem scope.routeStylesObjekt hinzugefügt oder daraus entfernt wird.
Hinweis: Dies setzt voraus, dass sich Ihr ng-appAttribut auf dem <html>Element befindet, nicht auf <body>oder irgendetwas innerhalb von <html>.
2. Geben Sie Folgendes an, welche Stylesheets zu welchen Routen gehören $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']
})
}]);
Diese Konfiguration fügt cssdem Objekt eine benutzerdefinierte Eigenschaft hinzu, mit der die Route jeder Seite eingerichtet wird. Dieses Objekt wird an jedes '$routeChangeStart'Ereignis als übergeben .$$route. Wenn '$routeChangeStart'wir also das Ereignis abhören css, können wir die von uns angegebene Eigenschaft abrufen und diese <link />Tags nach Bedarf anhängen / entfernen . Beachten Sie, dass die Angabe einer cssEigenschaft auf der Route völlig optional ist, da sie im '/some/route/2'Beispiel weggelassen wurde . Wenn die Route keine cssEigenschaft hat, wird die <head>Direktive einfach nichts für diese Route tun. Beachten Sie auch, dass Sie sogar mehrere seitenspezifische Stylesheets pro Route haben können, wie im '/some/route/3'obigen Beispiel, wobei die cssEigenschaft ein Array relativer Pfade zu den für diese Route benötigten Stylesheets ist.
3. Sie sind fertig
Diese beiden Dinge richten alles ein, was benötigt wurde, und meiner Meinung nach mit dem saubersten Code, der möglich ist.
Ich hoffe, das hilft jemand anderem, der mit diesem Problem genauso zu kämpfen hat wie ich.
<link>Tags in diesem Format verwendet , mit dem neuesten Chrome, dem Server auf meinem lokalen Computer (und "Cache deaktivieren", um die Bedingungen für das erste Laden zu simulieren). Ich stelle mir vor, dass das Vorabfügen eines<style>Tags in den HTML-Teil auf dem Server dieses Problem vermeiden würde.