我正在尝试使用angular js动态地将CSS添加到我的html头部。这是示例代码
<div ng-repeat="stylesheet in stylesheets">
<link href="/myapp/{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" media="{{stylesheet.media}}" title="{{stylesheet.title}}" />
</div>
此代码按预期工作,但是当浏览器加载页面时,它会尝试使用raw angularjs模板获取css资源,并且我在firebug的网络选项卡中看到“404 not found error”。
Eg: request http://localhost:8080/myapp/%7B%7Bstylesheet.href%7D%7D, status 404
当页面完全加载时,它会替换模板值并加载正确的css。
有没有办法避免404错误并使其在angularjs处理后加载css?
答案 0 :(得分:31)
您应该使用ng-href代替href。
<link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" />
答案 1 :(得分:7)
我制作了一个AngularJS服务,可以轻松使用@Artem解决方案。
答案 2 :(得分:2)
使用$ route.resolve和promises还有另一种选择。这将等到CSS实际加载后不仅添加到头部(之后浏览器才开始检索文件,并且取决于CSS大小可能导致页面重排)。
// Routing setup
.config(function ($routeProvider) {
$routeProvider
.when('/home', {
controller: 'homeCtrl',
templateUrl: 'home.tpl.html'
}).when('/users', {
controller: 'usersCtrl',
controllerAs: 'vm',
templateUrl: 'users.tpl.html',
resolve: {
load: ['injectCSS', function (injectCSS) {
return injectCSS.set("users", "users.css");
}]
}
}).otherwise({
// default page
redirectTo: '/home'
});
})
服务实施
.factory("injectCSS", ['$q', '$http', 'MeasurementsService', function($q, $http, MeasurementsService){
var injectCSS = {};
var createLink = function(id, url) {
var link = document.createElement('link');
link.id = id;
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
return link;
}
var checkLoaded = function (url, deferred, tries) {
for (var i in document.styleSheets) {
var href = document.styleSheets[i].href || "";
if (href.split("/").slice(-1).join() === url) {
deferred.resolve();
return;
}
}
tries++;
setTimeout(function(){checkLoaded(url, deferred, tries);}, 50);
};
injectCSS.set = function(id, url){
var tries = 0,
deferred = $q.defer(),
link;
if(!angular.element('link#' + id).length) {
link = createLink(id, url);
link.onload = deferred.resolve;
angular.element('head').append(link);
}
checkLoaded(url, deferred, tries);
return deferred.promise;
};
return injectCSS;
}])
如果您希望包含此内容,可以使用try添加超时。
答案 3 :(得分:2)
我创建了一个非常简单的示例,说明如何进行条件css添加
<link rel="stylesheet" ng-if="lang_direction == 'rtl'" ng-href="{{lang_direction == 'rtl' ? 'css/rtl.css' : ''}}" >
答案 4 :(得分:0)
对于任何希望在运行时使用AngularJS创建真正动态CSS的人来说,这就是我所使用的。
<强>的index.html 强>
<head>
<style type="text/css" ng-bind-html="styles"></style>
</head>
<强> cssService 强>
this.$rootScope.myStyles = ".test { color : red; }";
这只是一个例子,如果您拥有一个并将其保持在$rootScope