Saya tahu pertanyaan ini sudah tua sekarang, tetapi setelah melakukan banyak penelitian tentang berbagai solusi untuk masalah ini, saya pikir saya mungkin telah menemukan solusi yang lebih baik.
UPDATE 1: Sejak memposting jawaban ini, saya telah menambahkan semua kode ini ke layanan sederhana yang telah saya posting ke GitHub. Repo itu berada di sini . Jangan ragu untuk memeriksanya untuk info lebih lanjut.
UPDATE 2: Jawaban ini bagus jika yang Anda butuhkan adalah solusi ringan untuk menarik stylesheet untuk rute Anda. Jika Anda ingin solusi yang lebih lengkap untuk mengelola stylesheet on-demand di seluruh aplikasi Anda, Anda mungkin ingin checkout proyek AngularCSS Door3 . Ini memberikan fungsionalitas yang lebih halus.
Jika ada orang di masa depan yang tertarik, inilah yang saya temukan:
1. Buat arahan khusus untuk <head>elemen:
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;
});
}
});
}
};
}
]);
Arahan ini melakukan hal-hal berikut:
- Ini mengkompilasi (menggunakan
$compile) string html yang membuat satu set <link />tag untuk setiap item dalam scope.routeStylesobjek menggunakan ng-repeatdan ng-href.
- Ini menambahkan set
<link />elemen yang dikompilasi ke <head>tag.
- Ini kemudian menggunakan
$rootScopeuntuk mendengarkan '$routeChangeStart'acara. Untuk setiap '$routeChangeStart'peristiwa, ia mengambil objek "saat ini" $$route(rute yang akan ditinggalkan pengguna) dan menghapus file css parsial-spesifik dari <head>tag. Ia juga mengambil objek "berikutnya" $$route(rute yang akan dituju pengguna) dan menambahkan file css parsial-spesifik ke <head>tag.
- Dan
ng-repeatbagian dari <link />tag yang dikompilasi menangani semua penambahan dan penghapusan stylesheet khusus halaman berdasarkan apa yang ditambahkan atau dihapus dari scope.routeStylesobjek.
Catatan: ini mensyaratkan bahwa ng-appatribut Anda ada pada <html>elemen, bukan pada <body>atau apa pun di dalamnya <html>.
2. Tentukan stylesheet mana yang termasuk dalam rute yang menggunakan $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']
})
}]);
Konfigurasi ini menambahkan cssproperti kustom ke objek yang digunakan untuk mengatur rute setiap halaman. Objek itu diteruskan ke setiap '$routeChangeStart'peristiwa sebagai .$$route. Jadi saat mendengarkan '$routeChangeStart'acara, kita dapat mengambil cssproperti yang telah kita tentukan dan menambahkan / menghapus <link />tag tersebut sesuai kebutuhan. Perhatikan bahwa menentukan cssproperti pada rute sepenuhnya opsional, karena dihilangkan dari '/some/route/2'contoh. Jika rute tidak memiliki cssproperti, <head>arahan hanya akan melakukan apa pun untuk rute itu. Perhatikan juga bahwa Anda bahkan dapat memiliki beberapa stylesheet khusus halaman per rute, seperti pada '/some/route/3'contoh di atas, di mana cssproperti adalah array jalur relatif ke stylesheet yang diperlukan untuk rute itu.
3. Anda selesai
Kedua hal mengatur semua yang diperlukan dan itu melakukannya, menurut saya, dengan kode terbersih mungkin.
Semoga itu bisa membantu orang lain yang mungkin berjuang dengan masalah ini sebanyak saya.
<link>tag css dalam format ini , dengan Chrome terbaru, server di mesin lokal saya (dan "Nonaktifkan cache" untuk mensimulasikan kondisi "memuat pertama"). Saya membayangkan bahwa pra-menyisipkan<style>tag di parsial html di server akan menghindari masalah ini.