文章詳情頁

angular.js - ui-router多視圖嵌套，如果保障各個ui-view下的css相互獨立

瀏覽：157日期：2024-03-14 10:12:24

問題描述

如題：

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的時候，你都在最頂部加一個模塊化的類名，如

.first-one { // 這個頁面所有的樣式}

這樣，只要其他頁面沒有first-one這個類，css自然不會生效。

而如果你里面的css是沒有用一個大模塊包裹起來的，例如像reset.css那樣的

body { margin: 0; padding: 0;}

那當加載到這個css的時候，一定會影響到別的頁面了