如何为 angularjs 路由中的每个视图指定 css

最新推荐文章于 2020-09-29 18:47:08 发布

阿龙sir

最新推荐文章于 2020-09-29 18:47:08 发布

阅读量1.9k

点赞数

分类专栏： angular 文章标签： angularjs

angular 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.为<head>元素创建自定义指令：

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

该指令执行以下操作：

它编译（使用$compile）一个HTML字符串，<link />该scope.routeStyles对象使用ng-repeat和对象中的每个项目创建一组标签ng-href。
它将编译的<link />元素集合附加到<head>标签。
然后用它$rootScope来收听'$routeChangeStart'事件。对于每个'$routeChangeStart'事件，它捕获“当前” $$route对象（用户即将离开的路由），并从<head>标签中删除其部分特定的css文件。它还抓住“下一个” $$route对象（用户即将去的路由），并将其部分特定的css文件添加到<head>标签中。
ng-repeat编译<link />标签的一部分根据添加到scope.routeStyles对象或从对象中删除的内容，处理所有添加和删除页面特定样式表的所有内容。

注意：这要求您的ng-app属性在<html>元素上，而不是<body>内部的内容<html>。

2.使用以下命令指定哪些样式表属于哪些路由$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']
        })
}]);

此配置css为用于设置每个页面的路由的对象添加一个自定义属性。该对象被传递给每个'$routeChangeStart'事件.$$route。所以当听'$routeChangeStart'事件时，我们可以抓取css我们指定的属性，并<link />根据需要附加/删除这些标签。请注意，css在路由上指定属性是完全可选的，因为它在'/some/route/2'示例中被省略。如果该路由没有css属性，该<head>指令将不会对该路由执行任何操作。还要注意，您甚至可以拥有每个路由的多个特定于页面的样式表，如上'/some/route/3'例所示，其中的css属性是该路由所需样式表的相对路径数组。

当您移动到新视图时，该脚本会删除以前视图的样式。如果您不希望发生这种情况，只需从指令中删除以下代码：angular.forEach(current.$$route.css, function(sheet){ delete scope.routeStyles[sheet]; });

如果路由为ui-router 即需要下载依赖(angular-ui-router-styles)来实现:

它允许您使用Angular的ui-router $stateProvider服务为应用程序声明部分特定或路由特定的样式。这可以解决这个问题，让你做这样的事情：

app.config(['$stateProvider', function($stateProvider){
    $stateProvider

      .state('state1', {
        url: '/state1',
        controller: 'State1controller',
        template: '<div ui-view></div>',
        data: {
          css: [
            'styles/custom-state1.css',
            {
              name: 'layout',
              href: 'styles/state1-layout.css'
            }
          ]
        }
      })

      .state('state1.state12', {
        url: '/:id',
        controller: 'State12Controller',
        templateUrl: 'views/my-template.html',
        data: {
          css: [
            'styles/custom-state1.state12.css',
            {
              name: 'layout',
              href: 'styles/state1.state12-layout.css'
            }
          ]
        }
      })

      .state('state2', {
        url: '/state2',
        controller: 'State2Controller',
        templateUrl: 'views/another-template.html',
        data: {
          css: ['styles/custom-state2.css', 'styles/another.css']
        }
      })

      .state('state3', {
        url: '/state3',
        controller: 'State3Controller',
        templateUrl: 'views/another-super-template.html',
        data: {
          css: 'styles/custom-state3.css'
        }
      })
        // more states can be declared here
}]);

如何安装：

用Bower通过安装 bower install angular-ui-router-styles --save
确保您的应用程序模块指定uiRouterStyles为依赖关系：angular.module('myApplication', ['uiRouterStyles'])
将指令添加ui-router-styles到您的身体标签或任何您想要的地方

<html>
  <head>
   <body ng-app="myApp" ui-router-styles>
  </head>
</html>

向状态数据对象添加css文件相对路径

.state('state1', {
  url: '/state',
  controller: 'StateCtrl',
  templateUrl: 'views/my-template.html',
  data: {
    css: 'styles/some-overrides.css'
  }
})

注意事项：

在路由上指定一个css属性是完全可选的。如果状态没有css属性，则该服务将对该路由不做任何事情。
您甚至可以对每个状态拥有多个特定于页面的样式表，其中css属性是相对路径数组或包含名称和href属性的对象数组。
如果存在父状态，则继承数据对象。

该指令执行以下操作：

它编译（使用$compile）一个html字符串，它data.css使用ng-repeat和使用state属性中的每个项目创建一组标签ng-href。
它将编译的<link />元素集合附加到<head>标签。
然后用它$rootScope来收听'$stateChangeSuccess'事件。对于每个'$stateChangeSuccess'事件，它清除之前附加的所有css，并将新的css文件添加到<head>标签中（如果有的话）。

转载地址:

阿龙sir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何为 angularjs 路由中的每个视图指定 css

1.为元素创建自定义指令：app.directive('head', ['$rootScope','$compile', function($rootScope, $compile){ return { restrict: 'E', link: function(scope, elem){
复制链接

扫一扫

专栏目录