Question

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

<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'
        }
    };
}

其他一切正常，谢谢你的回忆。

Answer 1

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

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

P.S。这是行不通的，因为你有一个拼写错误 - inlude in includes。

Answer 2

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

Answer 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();

});

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

3 个答案: