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的時候，一定會影響到別的頁面了
網公網安備