在html头部有条件地呈现css
我正在尝试使用angular js将css动态添加到我的html头部。下面是示例代码在html头部有条件地呈现css,html,css,angularjs,Html,Css,Angularjs,我正在尝试使用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 ng-repeat="stylesheet in stylesheets">
<link href="/myapp/{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" media="{{stylesheet.media}}" title="{{stylesheet.title}}" />
</div>
当页面完全加载时,它会替换模板值并加载正确的css
有没有办法避免404错误并使其在angularjs处理后加载css?您应该使用而不是href
<link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" />
我制作了一个AngularJS服务,以便轻松使用@Artem解决方案
.还有一个使用$route.resolve和promises的选项。这将等待CSS实际加载,而不仅仅是添加到头部(之后浏览器才开始检索文件,根据CSS大小可能导致页面回流) 服务实现
.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;
}])
如果这是您希望包含的内容,您可以使用trytes添加超时
查看这篇文章以了解更多详细信息:我创建了一个非常简单的示例,说明如何添加条件css
<link rel="stylesheet" ng-if="lang_direction == 'rtl'" ng-href="{{lang_direction == 'rtl' ? 'css/rtl.css' : ''}}" >
对于任何希望在运行时使用AngularJS创建真正动态CSS的人,这就是我所使用的 index.html
css服务
this.$rootScope.myStyles=“.test{color:red;}”代码>
这只是一个例子,如果您有一个indexController,那么最好将样式放在indexController中,并使其远离$rootScope
太棒了,我希望angular社区将共享和聚集jquery插件所做的相同的伟大生态系统。这很酷!我喜欢你的服务。它非常容易使用,singlePageMode工作得很好!谢谢
.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;
}])
<link rel="stylesheet" ng-if="lang_direction == 'rtl'" ng-href="{{lang_direction == 'rtl' ? 'css/rtl.css' : ''}}" >