search

Home  >  Q&A  >  body text

angular.js - ui-router multi-view nesting, if the css under each ui-view is guaranteed to be independent of each other

As in the title: 

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']);
                }]
            }
    })

There is a large css file linked in topbar.html, which has modified the default tag. If I do nothing at present, this css file will affect my other pages. How should I deal with this problem?

伊谢尔伦伊谢尔伦2883 days ago523

reply all(1)I'll reply

  • PHPz

    PHPz2017-05-15 17:10:35

    You actually mean the mutual influence of css.
    You can use an html as a module. When writing css, you add a modular class name at the top, such as 

    <html class="first-one">
    <head></head>
    <body></body>
</html>
    .first-one {
    // 这个页面所有的样式
}

    In this way, as long as other pages do not have the first-one class, the css will naturally not take effect.

    And if your css is not wrapped in a large module, such as reset.css

    body {
    margin: 0;
    padding: 0;
}

    Then when this css is loaded, it will definitely affect other pages

    reply
    0
  • Cancelreply