angular.js - ui-router多视图嵌套，如果保障各个ui-view下的css相互独立
问题描述
如题：
ui-router多视图嵌套，如果保障各个ui-view下的css相互独立
.state(’companyManage’,{
url:’/company’,views:{ ’’:{templateUrl:’company/pages/company.html’,controller:’companyCtr’ }, ’common_topbar@companyManage’:{templateUrl:’home-page/topbar.html’, }, ’details@companyManage’:{templateUrl:’company/pages/company_details.html’,controller:’companyDetailCtr’ }},resolve:{ deps:['$ocLazyLoad',function($ocLazyLoad){return $ocLazyLoad.load(['company/js/companyCtr.js','company/js/companyDetailCtr.js','company/js/fun.js',’company/css/company.css’,’main/common_topbar.css’]);}] } })
topbar.html里面link了一个很大的css文件，它里面修改了默认标签，目前我这样什么都不处理的话，这个css文件会影响我的其他页面，请问，如果处理这个问题呢?
问题解答
回答1：你的意思其实是css的相互影响吧。你可以将一个html作为一个模块，在写css的时候，你都在最顶部加一个模块化的类名，如
<html class='first-one'> <head></head> <body></body></html>
.first-one { // 这个页面所有的样式}
这样，只要其他页面没有first-one这个类，css自然不会生效。
而如果你里面的css是没有用一个大模块包裹起来的，例如像reset.css那样的
body { margin: 0; padding: 0;}
那当加载到这个css的时候，一定会影响到别的页面了
网公网安备