Javascript 如何在路由到不同角度的页面时使用不同的背景_Javascript_Html_Css_Angularjs_Yeoman Generator

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

javascript html css angularjs

Javascript 如何在路由到不同角度的页面时使用不同的背景,javascript,html,css,angularjs,yeoman-generator,Javascript,Html,Css,Angularjs,Yeoman Generator,所以，我正在使用约曼角度生成器进行角度项目。我有一个.png。我想这个图像是登录页面的背景只。单击submit按钮后，它将重定向到#/about.html，并使用body类作为全屏背景样式。我该怎么做以下是我的css： body { padding-top: 50px; background-color: #EEF2F5; font-family: 'Montserrat', sans-serif; } body2, .body2 { background: url(po

所以，我正在使用约曼角度生成器进行角度项目。我有一个.png。我想这个图像是登录页面的背景只。单击submit按钮后，它将重定向到#/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>


在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>


身体{
填充顶部：50px；
背景色：#EEF2F5；
字体系列：“蒙特塞拉特”，无衬线；
}
车身2，
.body2{
背景：url（powercube-09.png）；
背景重复：无重复；
字体系列：“蒙特塞拉特”，无衬线；
}

此样式将影响view/main.html
 在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>


身体{
填充顶部：50px；
背景色：#EEF2F5；
字体系列：“蒙特塞拉特”，无衬线；
}
车身2，
.body2{
背景：url（powercube-09.png）；
背景重复：无重复；
字体系列：“蒙特塞拉特”，无衬线；
}

此样式将影响view/main.html
 使用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">

使用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">

使用以下css将背景图像设置为路由主页的最大div。简单地将其包含在HTML中可能比将其分离更容易。加载其他页面后，背景图像将返回默认值
#bigDiv {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

使用以下css将背景图像设置为路由主页的最大div。简单地将其包含在HTML中可能比将其分离更容易。加载其他页面后，背景图像将返回默认值
#bigDiv {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

首先，您需要更正您的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>










这是一个令人痛苦的密码
首先，您需要更正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>










这是一个令人痛苦的密码

如果要跨页面多次使用该指令，可以为该指令提供数据；如果不需要，可以尝试修改.css（）。addClass（）
如果要跨页面多次使用此指令，可以给指令一个数据，如果不需要，可以尝试修改.css（）。addClass（）
您可以在$routeChangeSuccess
上发生一些事件，然后在范围中维护一个具有类名的变量。。在HTML上，您需要使用ng class
。所有这些组合都将使用plunkr mate完成“you get me示例”？您可以在$routeChangeSuccess
上有一些事件，然后在范围内维护一个具有类名的变量。。在HTML上，你需要使用ng类
。所有这些组合将完成plunkr mate的trickcan you get me示例？它更接近mate。我想将body 2作为views/main.html的样式，将body作为views/about.html的样式。现在的结果是相反的，只需在views/main.html中添加body2，在views/abput.html中放置其他样式。它将覆盖样式，更接近配偶。我想将body 2作为views/main.html的样式，将body作为views/about.html的样式。现在的结果是相反的，只需在views/main.html中添加body2，在views/abput.html中放置其他样式。它将覆盖样式。但是，在您的情况下，要将css应用于view/about.html
，似乎只需将css类添加到about.html内的标记中即可。。。我遗漏了什么？但是，在您的例子中，如果将css应用于view/about.html
，您似乎可以简单地将css类添加到about.html内的标记中。。。我缺少什么？它能改变整个页面的背景吗？它能改变整个页面的背景吗？