具体需求
做这个的原因是有个别页面整体不同于其他页面，如果css全部放在一个文件中比较乱，所以就想着单独放，但是我在页面中引入这个css文件后会出现一些问题：就是点击这个页面之后再点击别的页面有些样式会被覆盖，所以就想着能不能通过按需引入解决这个问题。
查找资料
angular-route-styles 这个项目地址解决了我的要求，不过也可以不引入他的文件改为直接把这个文件写在route.js文件中
.......
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'//引入方式就是这样
})
.......
//主要是下面
.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) {
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;
});
}
});
$rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
if (previous && previous.$$route && previous.$$route.css) {
if (!angular.isArray(previous.$$route.css)) {
previous.$$route.css = [previous.$$route.css];
}
angular.forEach(previous.$$route.css, function (sheet) {
scope.routeStyles[sheet] = undefined;
});
}
});
}
};
}
]);
注意
ng-app要放在html标签上
<html ng-app="RouteStylesApp" ng-controller="RouteStylesCtrl">
扫一扫
4472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
