Tôi biết câu hỏi này đã cũ, nhưng sau khi thực hiện rất nhiều nghiên cứu về các giải pháp khác nhau cho vấn đề này, tôi nghĩ rằng tôi có thể đã đưa ra một giải pháp tốt hơn.
CẬP NHẬT 1: Kể từ khi đăng câu trả lời này, tôi đã thêm tất cả các mã này vào một dịch vụ đơn giản mà tôi đã đăng lên GitHub. Các repo được đặt ở đây . Hãy kiểm tra nó để biết thêm.
CẬP NHẬT 2: Câu trả lời này là tuyệt vời nếu tất cả những gì bạn cần là một giải pháp nhẹ để kéo các bảng định kiểu cho các tuyến đường của bạn. Nếu bạn muốn có một giải pháp hoàn chỉnh hơn để quản lý các bảng định kiểu theo yêu cầu trong toàn bộ ứng dụng của mình, bạn có thể muốn kiểm tra dự án AngularCSS của Door3 . Nó cung cấp nhiều chức năng chi tiết hơn.
Trong trường hợp bất kỳ ai trong tương lai quan tâm, đây là những gì tôi nghĩ ra:
1. Tạo một lệnh tùy chỉnh cho <head>phần tử:
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;
});
}
});
}
};
}
]);
Lệnh này thực hiện những điều sau đây:
- Nó biên dịch (sử dụng
$compile) một chuỗi html tạo ra một tập hợp các <link />thẻ cho mọi mục trong scope.routeStylesđối tượng sử dụng ng-repeatvà ng-href.
- Nó nối thêm tập hợp các
<link />phần tử vào <head>thẻ.
- Sau đó, nó sử dụng
$rootScopeđể lắng nghe các '$routeChangeStart'sự kiện. Đối với mọi '$routeChangeStart'sự kiện, nó lấy $$routeđối tượng "hiện tại" (tuyến đường mà người dùng sắp rời đi) và xóa (các) tệp css cụ thể một phần khỏi <head>thẻ. Nó cũng lấy $$routeđối tượng "tiếp theo" (tuyến đường mà người dùng sắp đi) và thêm bất kỳ (các) tệp css cụ thể nào của nó vào <head>thẻ.
- Và
ng-repeatmột phần của <link />thẻ đã biên dịch xử lý tất cả việc thêm và xóa các biểu định kiểu dành riêng cho trang dựa trên những gì được thêm vào hoặc xóa khỏi scope.routeStylesđối tượng.
Lưu ý: điều này đòi hỏi ng-appthuộc tính của bạn nằm trên <html>phần tử, không phải trên <body>hoặc bất cứ thứ gì bên trong <html>.
2. Chỉ định biểu định kiểu nào thuộc về tuyến nào sử dụng $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']
})
}]);
Cấu hình này thêm một thuộc tính tùy chỉnh csscho đối tượng được sử dụng để thiết lập tuyến đường của mỗi trang. Đối tượng đó được truyền cho mỗi '$routeChangeStart'sự kiện như .$$route. Vì vậy, khi nghe '$routeChangeStart'sự kiện, chúng tôi có thể lấy thuộc csstính mà chúng tôi đã chỉ định và chắp thêm / xóa các <link />thẻ đó khi cần. Lưu ý rằng việc chỉ định một thuộc csstính trên tuyến là hoàn toàn tùy chọn, vì nó đã bị bỏ qua khỏi '/some/route/2'ví dụ. Nếu tuyến đường không có csstài sản, <head>chỉ thị sẽ không làm gì cho tuyến đường đó. Cũng lưu ý rằng bạn thậm chí có thể có nhiều bảng định kiểu dành riêng cho mỗi tuyến, như trong '/some/route/3'ví dụ trên, trong đó thuộc csstính là một mảng các đường dẫn tương đối đến các bảng định kiểu cần thiết cho tuyến đó.
3. Bạn đã hoàn thành
Hai điều đó thiết lập mọi thứ cần thiết và theo ý tôi, với mã sạch nhất có thể.
Hy vọng rằng sẽ giúp người khác có thể đang đấu tranh với vấn đề này nhiều như tôi.
<link>thẻ css ở định dạng này , với Chrome mới nhất, máy chủ trên máy cục bộ của tôi (và "Tắt bộ nhớ cache" để mô phỏng các điều kiện "tải đầu tiên"). Tôi tưởng tượng rằng việc chèn trước một<style>thẻ trong phần html trên máy chủ sẽ tránh được vấn đề này.