Question

我有一个场景，我必须在login页面使用CSS包含背景图像。但是，我不想在我的home页面上使用它。 HTML代码如下。

<div data-ng-controller="loginCtrl" class="bg">
    <div data-ng-if="!landingPage" data-ng-include="'view/login.html'"></div>
    <div data-ng-if="landingPage=='login'" data-ng-include="'view/login.html'"></div>
    <div data-ng-if="landingPage=='home'" data-ng-include="'view/home.html'"></div> <!--I don't want to use CSS class 'bg'-->
</div>

和.css文件是

body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url('/custom/img/pp.jpg');

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

我怎样才能实现它？

Answer 1

使用ng-class

<div data-ng-controller="loginCtrl" ng-class="{bg: isLoggedIn}">
    <div data-ng-if="!landingPage" data-ng-include="'view/login.html'"></div>
    <div data-ng-if="landingPage=='login'" data-ng-include="'view/login.html'"></div>
    <div data-ng-if="landingPage=='home'" data-ng-include="'view/home.html'"></div> <!--I don't want to use CSS class 'bg'-->
</div>

登录后

将$scope变量更新为true

Answer 2

从大多数时候开始，你会在不同的页面上添加不同的背景图片，所以我宁愿使用inline-css添加它。

如何从div中排除css类？

2 个答案: