I'm encountering a problem that is somewhat similar (although not exactly the same, so please be patient) to the one discussed in Conditionally-rendering css in html head
I am dynamically loading a stylesheet using a scope variable defined at the start of my controllers:
<link rel="stylesheet" data-ng-href="css/{{ filename }}.css" />
By using ng-href (in its data- form), I can prevent unwanted requests like:
http://localhost/css/%7B%7B%20filename%7D%7D.css
However, the request still fires too early and I often end up with this result:
http://localhost/css/.css
This suggests that the request is being made between Angular removing its own markup and replacing it with the correct value (which happens a moment later when the stylesheet loads correctly). Is this even possible...!?
I suspect that I may be updating the filename scope variable too late, but as mentioned earlier, it is the first task in my controller:
angular.module('myControllers', [])
.controller('TestCtrl', ['$scope', function($scope) {
$scope.filename = 'test';
// additional code...
}]);
I am using Angular 1.1.5; is there a solution to this issue? It's not a major problem, but it would be preferable to resolve it.
EDIT: Below is the complete code upon request. Page templates are excluded as they are unrelated to the issue.
index.html :
<!DOCTYPE html>
<html lang="en" data-ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My App</title>
<link rel="stylesheet" data-ng-href="/assets/css/{{ filename }}.css" />
</head>
<body>
<div id="app" class="app" style="display: none;" data-ng-view></div>
<script src="/assets/js/lib/angular/angular.min.js"></script>
<script src="/assets/js/app/app.js"></script>
<script src="/assets/js/app/controllers.js"></script>
</body>
</html>
app.js :
var app = angular.module('myapp', ['myControllers'])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl: 'path/to/my/template.html',
controller: 'TestCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
app.run();
controllers.js :
angular.module('myControllers', [])
.controller('TestCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
$rootScope.filename = 'stylesheet';
}]);
(I also attempted an empty controller with identical results.)