如何将样式表附加到 <head>在 AngularJS $routeProvider 中? [英] How to append a stylesheet to <head> in AngularJS $routeProvider?
问题描述
我只想在用户访问我的 AngularJS 应用程序/站点上的 contact.html 视图时加载特定的 CSS 文件.我发现这个答案对我来说几乎很有意义 How to include view/AngularJS 中的部分特定样式 charlietfl 接受的答案如下:
I want to load a specific CSS file only when a user accesses the contact.html view on my AngularJS app/site. I found this answer which almost made sense to me How to include view/partial specific styling in AngularJS The accepted answer by charlietfl reads :
可以在 $routeProvider 中将新样式表附加到头部.为了简单使用字符串，但也可以创建新的链接元素，或为样式表创建服务
Could append a new stylesheet to head within
$routeProvider. For simplicity am using a string but could create new link element also, or create a service for stylesheets
/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
if( !angular.element('link#myViewName').length){
angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}
在页面中预加载的最大好处是任何背景图像都可以已经存在，并且FOUC
Biggest benefit of prelaoding in page is any background images will
already exist, and less lieklyhood of FOUC
问题是我不知道在我的 $routeProvider 中的哪个位置添加代码.charlietfl 提到将它放在评论中的位置，内容为
The problem is that I do not know exactly where in my $routeProvider to add the code. charlietfl mentions where to put it in a comment which reads
如果尚未调用路由的时间，则不会.可以把这段代码放进去在 routeProvider 内时的控制器回调，或者可能在可能会更快触发的解析回调中
not if the when for the route hasn't been called. Can put this code in controller callback of when within the routeProvider, or perhaps within resolve callback which likely triggers sooner
我已经按照建议修改了我的 $routeProvider.我在.when('/contact'之后的对象中添加了一个resolve.这是我的代码
I have modified my $routeProvider following the advice. I added a resolve in the object following .when('/contact'. Here is my code
angular.module('maxmythicApp', ['ngResponsiveImages'])
.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
$routeProvider
.when('/', {
templateUrl: '/views/design.html',
controller: 'MainCtrl'
})
.when('/design', {
templateUrl: '/views/design.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: '/views/about.html',
controller: 'MainCtrl'
})
.when('/contact', {
templateUrl: '/views/contact.html',
controller: 'MainCtrl',
resolve:
if( !angular.element('link#myViewName').length){
angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}
})
.otherwise({
redirectTo: '/'
});
});
这行得通吗?
推荐答案
我为它做了一个服务.
重要部分代码:
var head = angular.element(document.querySelector('head')); // TO make the code IE < 8 compatible, include jQuery in your page and replace "angular.element(document.querySelector('head'))" by "angular.element('head')"
if(head.scope().injectedStylesheets === undefined)
{
head.scope().injectedStylesheets = [];
head.append($compile("<link data-ng-repeat='stylesheet in injectedStylesheets' data-ng-href='{{stylesheet.href}}' rel='stylesheet' />")(scope)); // Found here : http://stackoverflow.com/a/11913182/1662766
}
head.scope().injectedStylesheets.push({href: "/url/to/style.css"});
Github 中的完整代码:https://github.com/Yappli/angular-css-injector)
Full code in Github : https://github.com/Yappli/angular-css-injector)
这篇关于如何将样式表附加到 <head>在 AngularJS $routeProvider 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
