如何添加一个样式表到＆lt; HEAD＆GT;在AngularJS $ routeProvider？ [英] How to append a stylesheet to <head> in AngularJS $routeProvider?
问题描述
我要加载特定的CSS文件，只有当用户访问 contact.html 查看我的AngularJS应用程序/网站。我发现这个答案几乎对我有意义<一个href=\"http://stackoverflow.com/questions/15193492/how-to-include-view-partial-specific-styling-in-angularjs\">How包括在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">');
}
在页面prelaoding的最大的好处是任何背景图像将
已经存在，且 FOUC
Biggest benefit of prelaoding in page is any background images will
already exist, and less lieklyhood of FOUC
问题是，我不知道究竟在何处我的 $ routeProvider 添加code。 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
不若当路线没有被调用。可以把这个code在
在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 以下的建议。我添加了一个决心在对象以下。当（'/接触。这是我的code
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: '/'
});
});
将这工作？
推荐答案
我做了一个服务吧。
在code的重要组成部分：
Important part of the code :
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"});
全部code在Github上：<一href=\"https://github.com/Yappli/angular-css-injector\">https://github.com/Yappli/angular-css-injector)
这篇关于如何添加一个样式表到＆lt; HEAD＆GT;在AngularJS $ routeProvider？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
