Bu sorunun artık eski olduğunu biliyorum, ancak bu soruna çeşitli çözümler üzerinde tonlarca araştırma yaptıktan sonra daha iyi bir çözüm bulmuş olabilirim.
GÜNCELLEME 1: Bu cevabı gönderdikten sonra, bu kodun tamamını GitHub'a göndermiş olduğum basit bir hizmete ekledim. Depo burada bulunur . Daha fazla bilgi için kontrol etmekten çekinmeyin.
GÜNCELLEME 2: İhtiyacınız olan tek şey rotalarınız için stil sayfalarını çekmek için hafif bir çözümse bu cevap harika. Uygulamanız boyunca isteğe bağlı stil sayfalarını yönetmek için daha eksiksiz bir çözüm istiyorsanız, Door3'ün AngularCSS projesine göz atmak isteyebilirsiniz . Çok daha ince taneli işlevsellik sağlar.
Gelecekte ilgilenen biri olması durumunda, işte bulduğum şey:
1. <head>Öğe için özel bir yönerge oluşturun :
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;
});
}
});
}
};
}
]);
Bu yönerge aşağıdaki işleri yapar:
- O (kullanarak derler
$compilekümesi oluşturur bir html dizesi) <link />her öğenin etiketleri scope.routeStyleskullanarak nesne ng-repeatve ng-href.
- Bu derlenmiş
<link />öğe kümesini <head>etikete ekler .
- Daha sonra olayları
$rootScopedinlemek için kullanır '$routeChangeStart'. Her '$routeChangeStart'olay için, "geçerli" $$routenesneyi (kullanıcının ayrılmak üzere olduğu rota) yakalar ve kısmına özgü css dosyalarını <head>etiketten kaldırır . Ayrıca "sonraki" $$routenesneyi (kullanıcının gitmek üzere olduğu yol) yakalar ve kısmi-spesifik css dosyalarından herhangi birini <head>etikete ekler .
- Ve
ng-repeatderlenen <link />etiketin parçası , sayfaya özel stil sayfalarının tüm ekleme ve çıkarma işlemlerini scope.routeStylesnesneye eklenen veya nesneden neyin çıkarıldığına bağlı olarak işler .
Not: Bu, ng-appözelliğinizin <html>üzerinde <body>veya içindeki herhangi bir şeyin üzerinde değil , öğede olmasını gerektirir <html>.
2. Aşağıdakileri kullanarak hangi stil sayfalarının hangi rotalara ait olduğunu belirtin $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']
})
}]);
Bu yapılandırma css, her sayfanın yolunu ayarlamak için kullanılan nesneye özel bir özellik ekler . Bu nesne her '$routeChangeStart'olaya olarak aktarılır .$$route. Yani '$routeChangeStart'etkinliği dinlerken belirlediğimiz cssözelliği alabilir ve <link />gerektiğinde bu etiketleri ekleyebilir / kaldırabiliriz . Örnekte cssihmal edildiği için yol üzerinde bir özellik belirtmenin tamamen isteğe bağlı olduğunu unutmayın '/some/route/2'. Rotanın bir cssözelliği yoksa , <head>direktif bu rota için hiçbir şey yapmayacaktır. Ayrıca, '/some/route/3'yukarıdaki örnekte olduğu gibi, rota başına birden çok sayfaya özgü stil sayfalarına sahip olabileceğinizi de unutmayın ; burada cssözellik, o rota için gereken stil sayfalarına giden göreceli bir yol dizisidir.
3. Tamamladınız
Bu iki şey, ihtiyaç duyulan her şeyi ayarlar ve bence mümkün olan en temiz kodla bunu yapar.
Umarım bu, bu sorunla benim kadar mücadele eden başka birine yardımcı olur.
<link>etiketleri kullandım (ve "ilk yükleme" koşullarını simüle etmek için "Önbelleği devre dışı bırak"). Sunucuda kısmi html'ye önceden bir etiket eklemenin bu sorunu önleyeceğini hayal ediyorum.<style>