Javascript $rootScope.bodyClass在用户转到其他页面时不更改_Javascript_Html_Css_Angularjs

Javascript $rootScope.bodyClass在用户转到其他页面时不更改

javascript html css angularjs

Javascript $rootScope.bodyClass在用户转到其他页面时不更改,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我创建了一个body类，以便可以对不同的页面使用不同的CSS： homepage.js .controller('HomePageCtrl',function($scope,$rootScope,appService) { $rootScope.bodyClass = 'home-page' var app = angular.module("app", ['ngRoute']) .config(function($routeProvider) { $routeProvider

我创建了一个body类，以便可以对不同的页面使用不同的CSS：

homepage.js

.controller('HomePageCtrl',function($scope,$rootScope,appService) {
   $rootScope.bodyClass = 'home-page'

var app = angular.module("app", ['ngRoute'])

.config(function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'login.html',
      controller: 'LoginController'
    });
    $routeProvider.when('/home', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    });
  })
  .controller('HomeController', function($rootScope, $scope) {
    $rootScope.bodyClass = 'bg-info'
  })
  .controller('LoginController', function($rootScope, $scope) {
    $rootScope.bodyClass = 'bg-danger'
  });

login.js:

.controller('LoginCtrl', function ($rootScope,$scope,appService,$window) {
   $rootScope.bodyClass = 'login-page'

<body ng-app="yoApp" data-ng-class="bodyClass">

index.html:

.controller('LoginCtrl', function ($rootScope,$scope,appService,$window) {
   $rootScope.bodyClass = 'login-page'

<body ng-app="yoApp" data-ng-class="bodyClass">

它可以工作，但是当我点击到另一个页面时，上一个类会被维护，我必须点击refresh才能看到新的类

刷新前从登录页到主页：

<body ng-app="yoApp" data-ng-class="bodyClass" class="ng-scope login-page">

刷新后的主页：

<body ng-app="yoApp" data-ng-class="bodyClass" class="ng-scope home-page">

是什么原因造成的以及如何修复？

它在我的机器上工作正常。我创建了一个示例应用程序来测试该场景

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8" />
  <title>Into to Angular.js</title>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
  <script data-require="angular-ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body class="container" ng-class="bodyClass">
  <div class="row">
    <div class="col-sm-12">
      <h1>Intro to Angular</h1>
      <div id="view" ng-view=""></div>
    </div>
  </div>
</body>

</html>

<div id="login" class="row">
  <div class="col-sm-6 col-sm-offset-3">
    Welcome To Home Page.

  </div>
</div>

<div id="login" class="row">
  <div class="col-sm-6 col-sm-offset-3">
    <form>
      <fieldset class="radius">
        <div class="row">
          <div class="col-sm-6 columns">
            <input type="text" class="form-control" name="username" placeholder="username" required="" />
          </div>
          <div class="col-sm-6 columns">
            <input type="password" class="form-control" name="password" placeholder="password" required="" />
          </div>
        </div>
        <br>
        <a href="#/home">Login</a>
      </fieldset>
    </form>
  </div>
</div>

你能附上一个样品普朗克或小提琴吗？我在本地测试过，它似乎在不刷新的情况下发生变化。我将routing+ng视图与两个不同的控制器组合使用。@Supercol抱歉，我是AnglularJ初学者。您到底是如何使用

路由+ng视图的

？（或者你能把你的代码作为答案吗？）。要使fiddle功能化，您应该创建html页面。@supercool为什么不放置一个路由+ng视图的plnkr；-）