我面临的问题类似于(但不完全相同,请耐心等待)在Conditionally-rendering css in html head中所描述的问题。
我也在“懒惰地”加载样式表,从一个作用域变量中获取文件名,该变量在控制器的最开始初始化:
我正在使用
但是它仍然太早触发,几乎每次我都会得到这样的结果:
这似乎意味着请求在Angular删除自己的标记和替换正确值(稍后执行,并且然后我的样式表正确加载)之间触发。我认为这甚至不可能...!?
我想我可能是为filename作用域变量提供值太晚了,但是正如我所说,这是我控制器中的第一件事情:
(是的,我尝试过使用一个空控制器,就像这个一样,出现了同样的问题。)
我也在“懒惰地”加载样式表,从一个作用域变量中获取文件名,该变量在控制器的最开始初始化:
<link rel="stylesheet" data-ng-href="css/{{ filename }}.css" />
我正在使用
ng-href
(这里是以data-
形式)的方式,确实避免了不必要的请求,例如:http://localhost/css/%7B%7B%20filename%7D%7D.css
但是它仍然太早触发,几乎每次我都会得到这样的结果:
http://localhost/css/.css
这似乎意味着请求在Angular删除自己的标记和替换正确值(稍后执行,并且然后我的样式表正确加载)之间触发。我认为这甚至不可能...!?
我想我可能是为filename作用域变量提供值太晚了,但是正如我所说,这是我控制器中的第一件事情:
angular.module('myControllers', [])
.controller('TestCtrl', ['$scope', function($scope) {
$scope.filename = 'test';
// some more code...
}]);
我正在使用 Angular 1.1.5;有什么我可以做的吗?虽然这不是很大的问题,但如果我能解决它会更好。
编辑:根据要求,这里是完整的代码。我不会包含页面模板,因为它们与问题无关。
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';
}]);
(是的,我尝试过使用一个空控制器,就像这个一样,出现了同样的问题。)
ng-controller
指令或从$routeProvider
配置绑定控制器作用域。我对 Angular 也不是很熟悉,但我怀疑您的<link>
元素实际上并不是控制器作用域的一部分。{{filename}}
是否被正确地展开了呢? - André Dion