如何在AngularJS中包含视图/部分特定样式?

  • 回答 (2)
  • 关注 (0)
  • 查看 (53)

对于我的应用程序使用的各种视图使用单独的样式表,正确/可接受的方式是什么?

目前,我在顶部的view / partial的html中放置了一个链接元素,但是我已经被告知这是不好的做法,尽管所有现代浏览器都支持它,但我可以看出它为什么会被折磨。

另一种可能是将独立的样式表放在我的index.html中,head但是我希望它只在样式表的视图以性能名称加载时才加载样式表。

这是不好的做法,因为直到从服务器加载css之后,样式才会生效,导致在慢速浏览器中快速闪烁未格式化的内容?尽管我在本地进行测试,但我还没有目睹这一点。

有没有办法通过传递给Angular的对象加载CSS $routeProvider.when

你孩子啊你孩子啊提问于
Maj_Lundy回答于

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

该指令执行以下操作:

  1. 它编译创建一组<link />中每个项目的标记。scope.routeStyles对象使用ng-repeatng-href.
  2. 的编译集。<link />元素的<head>标签。
  3. 然后使用$rootScope倾听'$routeChangeStart'事件。为每一个'$routeChangeStart'事件,它抓住了“当前”。$$route对象(用户即将离开的路由)并从<head>标签。它也抓住了“下一个”$$route对象(用户即将到达的路由)并将其任何部分特定的css文件添加到<head>标签。
  4. 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属性是指向该路由所需样式表的相对路径数组。

JAVA-包身工潜水员回答于

Angular的模块化和封装超越了路线。基于网络向基于组件开发的方向发展,在指令中应用这一点也很重要。

如您所知,在Angular中,我们可以在页面和组件中包含模板(结构)和控制器(行为)。AngularCSS支持最后缺失的部分:附加样式表(演示文稿)。

对于完整的解决方案,我建议使用AngularCSS。

  1. 支持Angular的ngRoute,UI路由器,指令,控制器和服务。
  2. 不需要ng-app<html>标签中。当您有多个应用程序在同一页面上运行时,这一点很重要
  3. 您可以自定义样式表的注入位置:头部,正文,自定义选择器等...
  4. 支持预加载,持久和缓存清除
  5. 支持媒体查询并通过matchMedia API优化页面加载

这里有些例子:

路线

  $routeProvider
    .when('/page1', {
      templateUrl: 'page1/page1.html',
      controller: 'page1Ctrl',
      /* Now you can bind css to routes */
      css: 'page1/page1.css'
    })
    .when('/page2', {
      templateUrl: 'page2/page2.html',
      controller: 'page2Ctrl',
      /* You can also enable features like bust cache, persist and preload */
      css: {
        href: 'page2/page2.css',
        bustCache: true
      }
    })
    .when('/page3', {
      templateUrl: 'page3/page3.html',
      controller: 'page3Ctrl',
      /* This is how you can include multiple stylesheets */
      css: ['page3/page3.css','page3/page3-2.css']
    })
    .when('/page4', {
      templateUrl: 'page4/page4.html',
      controller: 'page4Ctrl',
      css: [
        {
          href: 'page4/page4.css',
          persist: true
        }, {
          href: 'page4/page4.mobile.css',
          /* Media Query support via window.matchMedia API
           * This will only add the stylesheet if the breakpoint matches */
          media: 'screen and (max-width : 768px)'
        }, {
          href: 'page4/page4.print.css',
          media: 'print'
        }
      ]
    });

指令

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});

另外,可以使用$css边缘情况下的服务:

myApp.controller('pageCtrl', function ($scope, $css) {

  // Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
  $css.bind({ 
    href: 'my-page/my-page.css'
  }, $scope);

  // Simply add stylesheet(s)
  $css.add('my-page/my-page.css');

  // Simply remove stylesheet(s)
  $css.remove(['my-page/my-page.css','my-page/my-page2.css']);

  // Remove all stylesheets
  $css.removeAll();

});

扫码关注云+社区