我已将样式表分为每个包含的单独的模块,我想动态地加载这些样式表,但有一些缺陷,当呈现时,我只为应该加载的每个表获得以下内容:

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


一切正常,感谢您的期待。

最佳答案

除了将href更改为ng-href之外,还可以像下面那样修改链接,因为您没有为样式表设置源。

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


附言它不起作用,因为您有一个包含-inlude in includes的错字。

关于html - AngularJS:使用ng-repeat动态加载CSS样式表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21165025/

10-13 00:37