如何包括AngularJS视图/部分特定造型 [英] How to include view/partial specific styling in AngularJS
问题描述
所以，我用约曼脚手架我的新项目，我喜欢使用的凉亭，咕噜和自动重载，我从来没有意识到我可能是如何高效使用这种开发环境中。我总是拒绝了，由于其复杂性。
So, I used Yeoman to scaffold my new project and I LOVE using bower, grunt, and AutoReload, I never even realized how efficient I could be with this kind of dev environment. I always turned it down due to its complexity.
无论如何，这是题外话。我有一个小问题的一件事是棱角分明。
Anyway, that is beside the point. The one thing I'm having a small problem with is Angular.
什么是使用单独的样式表我的应用程序使用了不同的观点的正确/接受的方式？
目前，我把一个链接元素在视图/顶部部分的HTML，但我已经告诉他们这是不好的做法，即使所有现代浏览器都支持它，但我能看到为什么它令人难以接受的。
Currently I'm placing a link element in the view/partial's html at the top but I've been told this is bad practice even though all modern browsers support it but I can see why it's frowned upon.
另一种可能性是将单独的样式表在我的index.html的头但我想它，如果它认为是在名称被加载只加载样式表性能。
The other possibility is placing the separate stylesheets in my index.html's head but I would like it to only load the stylesheet if its view is being loaded in the name of performance.
这是不好的做法，因为造型将不会生效后的CSS加载形式传递到服务器，导致未格式化的内容快速闪过一个缓慢的浏览器，直到？我还没有看到这个，虽然我在本地测试。
Is this bad practice since styling won't take effect until after the css is loaded form the server, leading to a quick flash of unformatted content in a slow browser? I have yet to witness this although I'm testing it locally.
有没有办法通过传递给对象加载CSS角的 $ routeProvider.when ？
Is there a way to load the CSS through the object passed to Angular's $routeProvider.when?
在此先感谢！
推荐答案
我知道这个问题是老了，但这样做一吨的各种解决方案，研究这个问题后，我想我可能已经想出了一个更好的解决方案。
I know this question is old now, but after doing a ton of research on various solutions to this problem, I think I may have come up with a better solution.
更新1：由于张贴这个答案，我已经加入这一切code来，我已经发布到GitHub的一个简单的服务。回购位于
UPDATE 1: Since posting this answer, I have added all of this code to a simple service that I have posted to GitHub. The repo is located here. Feel free to check it out for more info.
更新2：这个答案是伟大的，如果你需要的是在样式表拉着你的路线轻量级的解决方案。如果你想为整个应用程序管理的按需样式更完整的解决方案，您可能要结帐 DOOR3的AngularCSS项目。它提供了更精细的功能。
UPDATE 2: This answer is great if all you need is a lightweight solution for pulling in stylesheets for your routes. If you want a more complete solution for managing on-demand stylesheets throughout your application, you may want to checkout Door3's AngularCSS project. It provides much more fine-grained functionality.
在在未来的情况下，任何人有兴趣，这里就是我想出了：
In case anyone in the future is interested, here's what I came up with:
1。创建一个自定义指令中的＆LT; HEAD＆GT; 元素：
1. Create a custom directive for the <head> element:
app.directive('head', ['$rootScope','$compile',
function($rootScope, $compile){
return {
restrict: 'E',
link: function(scope, elem){
var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
elem.append($compile(html)(scope));
scope.routeStyles = {};
$rootScope.$on('$routeChangeStart', function (e, next, current) {
if(current && current.$$route && current.$$route.css){
if(!angular.isArray(current.$$route.css)){
current.$$route.css = [current.$$route.css];
}
angular.forEach(current.$$route.css, function(sheet){
delete scope.routeStyles[sheet];
});
}
if(next && next.$$route && next.$$route.css){
if(!angular.isArray(next.$$route.css)){
next.$$route.css = [next.$$route.css];
}
angular.forEach(next.$$route.css, function(sheet){
scope.routeStyles[sheet] = sheet;
});
}
});
}
};
}
]);
该指令做以下的事情：
- 它编译（使用
$编译）创建一组HTML字符串＆LT;链接/＆GT;在scope.routeStyles对象每一个项目的标签使用NG-重复和NG-HREF。 - 追加了编译
＆LT的设定;链路/＆GT;元素的＆LT; HEAD＆GT;标记。 - 然后，它使用
$ rootScope来听'$ routeChangeStart事件。对于每一个'$ routeChangeStart事件，它抓住了现行$$路线对象（用户路线即将离开），并移除＆LT其部分特定的CSS文件（S）; HEAD＆GT;标记。它也抓住了下一个$$路线对象（即用户即将前往的路线），并增加它的任何部分特定CSS文件（S）以在＆LT;头方式＆gt;标记 - 而编
＆LT的标记处理所有的加入和消除基于什么被添加到或从NG-重复部分;链接/＆GT;scope.routeStyles对象中删除指定页面的样式表。
- It compiles (using
$compile) an html string that creates a set of<link />tags for every item in thescope.routeStylesobject usingng-repeatandng-href. - It appends that compiled set of
<link />elements to the<head>tag. - It then uses the
$rootScopeto listen for'$routeChangeStart'events. For every'$routeChangeStart'event, it grabs the "current"$$routeobject (the route that the user is about to leave) and removes its partial-specific css file(s) from the<head>tag. It also grabs the "next"$$routeobject (the route that the user is about to go to) and adds any of its partial-specific css file(s) to the<head>tag. - And the
ng-repeatpart of the compiled<link />tag handles all of the adding and removing of the page-specific stylesheets based on what gets added to or removed from thescope.routeStylesobject.
2。指定样式表属于哪个使用路由 $ routeProvider ：
2. Specify which stylesheets belong to which routes using the $routeProvider:
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'
})
.when('/some/route/2', {
templateUrl: 'partials/partial2.html',
controller: 'Partial2Ctrl'
})
.when('/some/route/3', {
templateUrl: 'partials/partial3.html',
controller: 'Partial3Ctrl',
css: ['css/partial3_1.css','css/partial3_2.css']
})
}]);
此配置增加了一个自定义的 CSS 属性用于设置每个页面的路径的对象。该对象被传递到每个'$ routeChangeStart事件作为。$$路线。所以听'$ routeChangeStart事件的时候，我们可以抢 CSS 属性，我们指定并追加/删除根据需要标签，那些＆LT;链接/过夜。请注意，该航线上指定一个 CSS 属性是完全可选的，因为它是从/一些/路由/ 2 的例子。如果路由不具有 CSS 属性，则＆LT; HEAD＆GT; 指令只会为这条路线无能为力。还要注意的是，你甚至可以有每条路线多特定页面的样式表，如/一些/路由/ 3 上面的例子，其中 CSS 属性是需要这条路线的样式相对路径的数组。
This config adds a custom css property to the object that is used to setup each page's route. That object gets passed to each '$routeChangeStart' event as .$$route. So when listening to the '$routeChangeStart' event, we can grab the css property that we specified and append/remove those <link /> tags as needed. Note that specifying a css property on the route is completely optional, as it was omitted from the '/some/route/2' example. If the route doesn't have a css property, the <head> directive will simply do nothing for that route. Note also that you can even have multiple page-specific stylesheets per route, as in the '/some/route/3' example above, where the css property is an array of relative paths to the stylesheets needed for that route.
3。大功告成
认为需要这两件事情设置一切，它这样做，在我看来，用干净的code可能。
3. You're done Those two things setup everything that was needed and it does it, in my opinion, with the cleanest code possible.
希望帮助别人谁可能与这个问题，就像我是大费周折。
Hope that helps someone else who might be struggling with this issue as much as I was.
这篇关于如何包括AngularJS视图/部分特定造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
