如何避免 AngularJS 视图中的内联 CSS 并保持干净、高效的代码？

避免在 AngularJS 视图中使用内联 CSS：最佳实践

在 AngularJS 应用程序中包含视图特定的 CSS 是一个常见的挑战。添加的传统方法是：视图 HTML 中的元素被认为已过时。

建议的解决方案

为了解决此问题，出现了一个提供灵活性和性能优化的综合解决方案：

的自定义指令元素

app.directive('head', ['$rootScope','$compile',
    function($rootScope, $compile){
        return {
            restrict: 'E',
            link: function(scope, elem){
                scope.routeStyles = {};
                $rootScope.$on('$routeChangeStart', function (e, next, current) { ... });
            }
        };
    }
]);

使用自定义 CSS 属性进行路由配置

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'
        })
        ...
}]);

优点

• 避免内联 CSS 以改进可维护性
• 在整个应用程序中实施一致的方法
• 每个路由支持多个特定于页面的样式表
• 仅在显示相应视图时加载 CSS 来优化性能

以上是如何避免 AngularJS 视图中的内联 CSS 并保持干净、高效的代码？的详细内容。更多信息请关注PHP中文网其他相关文章！