Question

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

homepage.js

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

login.js：

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

的index.html：

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

它有效，但是当我点击另一个页面时，前一个类被维护，我必须点击刷新才能看到新的类。

刷新前从登录页面到主页：

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

导致此问题的原因及解决方法是什么？

Answer 1

它在我的机器上完美运行。我已经创建了一个示例应用程序来测试场景。

<强>的index.html

resource.query({params}, function(){/*your success callback*/})

<强> home.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>

<强>的login.html

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

  </div>
</div>

<强> app.js

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

<强> See plnkr

$ rootScope.bodyClass在用户转到另一个页面时不会更改

1 个答案: