搜索

首页  >  问答  >  正文

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文件会影响我的其他页面,请问,如果处理这个问题呢?

伊谢尔伦伊谢尔伦2795 天前481

全部回复(1)我来回复

  • PHPz

    PHPz2017-05-15 17:10:35

    你的意思其实是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的时候,一定会影响到别的页面了

    回复
    0
  • 取消回复