I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded:
<link ng-repeat="inlude in includes" rel="styesheet" href="" class="ng-scope">
Below is a snippet of my HTML code:
<!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>
Furthermore, here is an excerpt from my primary controller:
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'
}
};
}
All other functionalities seem to be working properly. Thank you for your assistance.