Sé que esta pregunta es antigua ahora, pero después de investigar un montón sobre varias soluciones a este problema, creo que podría haber encontrado una mejor solución.
ACTUALIZACIÓN 1: desde que publiqué esta respuesta, he agregado todo este código a un servicio simple que he publicado en GitHub. El repositorio se encuentra aquí . No dude en consultarlo para obtener más información.
ACTUALIZACIÓN 2: esta respuesta es excelente si todo lo que necesita es una solución liviana para obtener hojas de estilo para sus rutas. Si desea una solución más completa para administrar las hojas de estilo a pedido en toda su aplicación, puede consultar el proyecto AngularCSS de Door3 . Proporciona una funcionalidad mucho más fina.
En caso de que alguien en el futuro esté interesado, esto es lo que se me ocurrió:
1. Cree una directiva personalizada para el <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;
});
}
});
}
};
}
]);
Esta directiva hace lo siguiente:
- Compila (usando
$compile) una cadena html que crea un conjunto de <link />etiquetas para cada elemento del scope.routeStylesobjeto usando ng-repeaty ng-href.
- Agrega ese conjunto compilado de
<link />elementos a la <head>etiqueta.
- Luego usa el
$rootScopepara escuchar '$routeChangeStart'eventos. Para cada '$routeChangeStart'evento, toma el $$routeobjeto "actual" (la ruta que el usuario está a punto de abandonar) y elimina sus archivos css específicos parciales de la <head>etiqueta. También toma el "siguiente" $$routeobjeto (la ruta a la que va a ir el usuario) y agrega cualquiera de sus archivos css específicos parciales a<head> etiqueta.
- Y la
ng-repeatparte de la <link />etiqueta compilada maneja todas las adiciones y eliminaciones de las hojas de estilo específicas de la página en función de lo que se agrega o elimina del scope.routeStylesobjeto.
Nota: esto requiere que su ng-appatributo esté en el <html>elemento, no en el elemento <body>o dentro de él <html>.
2. Especifique qué hojas de estilo pertenecen a qué rutas utilizando $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']
})
}]);
Esta configuración agrega una csspropiedad personalizada al objeto que se utiliza para configurar la ruta de cada página. Ese objeto se pasa a cada '$routeChangeStart'evento como .$$route. Entonces, al escuchar el '$routeChangeStart'evento, podemos tomar la csspropiedad que especificamos y agregar / eliminar esas <link />etiquetas según sea necesario. Tenga en cuenta que especificar una csspropiedad en la ruta es completamente opcional, ya que se omitió en el '/some/route/2'ejemplo. Si la ruta no tiene una csspropiedad, la <head>directiva simplemente no hará nada por esa ruta. Tenga en cuenta también que incluso puede tener varias hojas de estilo específicas de la página por ruta, como en el '/some/route/3'ejemplo anterior, donde la csspropiedad es una matriz de rutas relativas a las hojas de estilo necesarias para esa ruta.
3. Has terminado
Esas dos cosas configuran todo lo que se necesitaba y lo hace, en mi opinión, con el código más limpio posible.
Espero que ayude a alguien más que pueda estar luchando con este problema tanto como yo.
<link>etiquetas css en este formato , con el último Chrome, el servidor en mi máquina local (y "Desactivar caché" para simular condiciones de "primera carga"). Me imagino que la inserción previa de una<style>etiqueta en el html parcial en el servidor evitaría este problema.