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