路由到不同角度页面时如何使用不同的背景答案

【问题标题】：How to using different background when routes to different angular page路由到不同角度页面时如何使用不同的背景
【发布时间】：2015-09-09 07:30:58
【问题描述】：

所以，我正在使用 yeoman angular-generator 进行 Angular 项目。我有一个.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>

【问题讨论】：

您可以在 $routeChangeSuccess 上进行一些事件，然后在范围内维护一个具有类名的变量。在 HTML 上，您需要使用 ng-class ..所有这些组合都可以解决问题
你能给我举个 plunkr mate 的例子吗？

标签： javascript html css angularjs yeoman-generator

【解决方案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。

【讨论】：

这是更亲密的伙伴。我想将 body2 作为views/main.html 的样式，将body 作为views/about.html 的样式。现在的结果是相反的大声笑
好的，只需在views/main.html中添加body2，在views/abput.html中添加其他样式。它将覆盖样式。

【解决方案2】：

首先，您需要更正您的 CSS。 “body2”不是标签。

我不完全确定您希望“body2”css 类出现在哪里，但是可以通过控制器逻辑来决定根据您所在的路线应用哪个类（这是您想要做的）：

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

【讨论】：

但是，在您的情况下，要将 css 应用于 view/about.html，您似乎可以简单地将 css 类添加到 about.html 内的标签中......我错过了什么？

【解决方案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">

主控制器：

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

【讨论】：

可以改变整个页面的背景吗？

【解决方案4】：

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

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

【讨论】：

【解决方案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");
    }

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

【讨论】：