AngularJS：使用 ng-repeat 动态加载 CSS 样式表答案

【问题标题】：AngularJS: Use ng-repeat to dynamically load CSS stylesheetsAngularJS：使用 ng-repeat 动态加载 CSS 样式表
【发布时间】：2015-01-10 03:26:18
【问题描述】：

我已将我的样式表拆分为每个包含的单独模块，我想动态加载这些但有一些困难，当渲染时，我只为每个应该加载的表获得以下内容：

<link ng-repeat="inlude in includes" rel="stylesheet" href="" class="ng-scope">

这是我的 HTML：

<!DOCTYPE html>
<html ng-app="forum" ng-controller="masterCtrl">
<head>
    <title>Forum</title>
    <link rel="stylesheet" href="/stylesheets/reset.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link ng-repeat="inlude in includes" rel="stylesheet" href="{{include.stylesheet}}">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
    <script src="/scripts/app.js"></script>
    <script src="/scripts/controllers.js"></script>
    <!--[if lt IE 9]>
    <script src="/scripts/html5shiv.js"></script>
    <![endif]-->
</head>
<body ng-view>
</body>
</html>

这是我的主控制器：

function masterCtrl($scope){
    $scope.includes = {
        header: {
            src: 'views/includes/header.html',
            stylesheet: 'stylesheets/header.css',
            searchQuery: ''
        },
        threadList: {
            src: 'views/includes/threadList.html',
            stylesheet: 'stylesheets/threadList.css'
        }
    };
}

其他一切正常，感谢观看。

【问题讨论】：

标签： html css angularjs header angularjs-ng-repeat

【解决方案1】：

除了将您的 href 更改为 ng-href 之外，请修改您的链接，如下所示，因为您没有设置样式表的来源。

<link ng-repeat="include in includes" rel="stylesheet" ng-href="include.stylesheet" class="ng-scope">

附：它不起作用，因为您的 include 有一个拼写错误 — inlude in includes。

【讨论】：

【解决方案2】：

用ng-href 属性替换你的href 属性。不过，这种方法对您的页面速度来说并不是很好。

【讨论】：

【解决方案3】：

您也可以查看AngularCSS

此 Angular 模块允许您在组件（指令）和页面（路由）中引用样式表。

如果你使用指令

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

如果你使用的是 ngRoute

$routeProvider
  .when('/my-page', {
    templateUrl: 'my-page/my-page.html',
    controller: 'pageCtrl',
    css: 'my-page/my-page.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();

});

【讨论】：