AngularJS 應用程式通常需要針對不同視圖使用單獨的樣式表，以增強用戶體驗。然而，使用 個人視圖中的元素可能會導致效能問題。本文探討了動態載入特定於視圖的樣式表的綜合解決方案，最大限度地減少佈局移動。
建議的解決方案涉及為
建立自訂指令。元素並更新 AngularJS $routeProvider 配置。自訂指令：
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) {
... (code to add/remove `<link>` elements based on routes) ...
});
}
}
}]);自訂指令：
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'
})
... (other routes as needed) ...
}]);以上是如何在 AngularJS 應用程式中有效管理特定於視圖的樣式表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
