在门户网站做产品单页多少钱一天/武汉seo优化服务
具体需求
做这个的原因是有个别页面整体不同于其他页面,如果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">