Question

所以，我正在使用yeoman角度发生器进行角度项目。我有一个.png。我希望此图像仅作为登录页面的背景。单击提交按钮后，它将重定向到＃/ about.html并使用body类作为全屏背景样式。我怎么能这样做？

这是我的css：

body {
  padding-top: 50px;
  background-color: #EEF2F5;
    font-family: 'Montserrat', sans-serif;
}

body2,
.body2 {
  background: url(powercube-09.png);
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
}

这是我的index.html：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/dashboard.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
    <!-- endbuild -->
  </head>
  <body ng-app="loginApp" class="body2">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div ng-view=“"></div>

这是我的观点/ main.html：

<div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"><br><br><br><br><br><br><br>
            <div class="widget2 widget_tally_box">
                <div class="x_panel" style="background:#edf1f4;">

                    <div class="x_content"><br>
                        <center>
                        <br><br>
                        <div class="col-md-12 form-group has-feedback">
                            <input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="Username">
                            <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                        </div>
                        <div class="col-md-12 form-group has-feedback">
                            <input type="password" class="form-control has-feedback-left"
                                   id="inputSuccess2" placeholder="Password">
                            <span class="fa fa-lock form-control-feedback left" aria-hidden="true"></span>
                        </div>

                        <div class="col-md-12">
                            <a ng-href="#/about"><button type="submit" class="btn2 btn-success3"><h15>SIGN IN</h15></button></a><br>
                        </div>

                        <div class="col-md-12 form-group has-feedback"> <br/>
                            <h32><strong>Forgot your password?</strong></h32>
                        <div class="divider"></div>
                            <h32>Not on PowerCube? <strong>Get started here.</strong></h32>
                        </div>


                            </center>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>

以下是我的观点/ about.html：

<p>This is the about view.</p>

    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>

Answer 1

在view / main.html的末尾添加css。

<style>
  body {
    padding-top: 50px;
    background-color: #EEF2F5;
    font-family: 'Montserrat', sans-serif;
  }

  body2,
  .body2 {
    background: url(powercube-09.png);
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
  }
</style>

此样式将对view / main.html产生影响。

Answer 2

首先，你想纠正你的CSS。＆＃39; body2＆＃39;不是标签。

我不完全确定你想要的地方＆＃39; body2＆＃39;要显示的css类，但是可以使用控制器逻辑来决定根据您所在的路径应用哪个类（这是pb您要执行的操作）：

main.controller('MainCtrl', function($scope, $location) {
 $scope.getClass = function(path) {
   if ($location.path().substr(0, path.length) == path) {
    return "active";
   } else {
    return "";
  }
 }
});

Html代码：

<ul class="nav nav-pills">
   <li ng-class="getClass('/main')"><a href="#/main">Phone List</a>
  </li>
  <li ng-class="getClass('/module1')"><a href="#/module1">Phone details</a>
  </li>
  <li ng-class=""><a href="#/module2">Module 2</a>
  </li>
 </ul>

这是wrking plunker代码 http://plnkr.co/edit/16iOyo6dz5RBNI91AD28?p=preview

Answer 3

使用ng-style（或ng-class）执行此操作，添加控制器以检查您何时进入登录页面并使用范围变量来更改样式，例如：

<div class="row" ng-controller="MainController>
        <div class="col-md-4"></div>
        <div class="col-md-4"><br><br><br><br><br><br><br>
            <div class="widget2 widget_tally_box">
                <div class="x_panel" ng-style="loginBackground">

MainController：

$scope.loginBackground = null;
If (islogin) {
   $scope.loginBackground = "background:#edf1f4;"
}

Answer 4

使用以下css将背景图像设置为路由主页的最大div。将它简单地包含在HTML中而不是将其分离可能更容易。加载其他页面后，背景图像将恢复为默认值。

#bigDiv {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

Answer 5

I encounter this issue yesterday and turn out with this solution, not so smart but it's working.

+ Assign each page with custom directive: changebg
+ Name the body in index.html with a id (#example)
+ Now hook up angular body and change background style.

        angular.module('app').directive('changebg',function(){
        return{
            restrict:'C',
            controller:'changebgctrl'
        }
        }).controller('changebgctrl',changebgctrl);

       changebgctrl.$inject =['$location','$scope'];
    function changebgctrl($location,$scope){
        angular.element("#example").removeClass(); // remove any class exist
        angular.element("#example").addClass("whitebody");
    }

如果你想跨页面多次使用这个指令，你可以给指令一个数据，或者如果你不想要的话，尝试修改.css（）.addClass（）

如何在路线到不同角度页面时使用不同的背景

5 个答案: