$ rootScope.bodyClass не меняется, когда пользователь переходит на другую страницу

Я создал класс тела, так что я мог бы использовать различные CSS для разных страниц:

homepage.js

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

Войти. ЯШ:

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

Что является причиной этого и как это исправить?

источник

2015-11-27 alexchenco

Вы можете приложить образец плункера или скрипку. –

Я тестировал в своем локальном, кажется, меняется без обновления. Я использовал комбинацию маршрутизации + ng-view с двумя разными контроллерами. –

@supercool Извините, я начинаю AnglularJS. Как вы точно использовали «routing + ng-view»? (Или вы могли бы разместить свой код в качестве ответа?) – alexchenco

Он отлично работает на моей машине. Я создал образец приложения для тестирования сценария.

index.html

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

<head> 
    <meta charset="UTF-8" /> 
    <title>Into to Angular.js</title> 
    <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script> 
    <script data-require="[email protected]*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script> 
    <link data-require="[email protected]" 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>

home.html

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

    </div> 
</div>

login.html

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

app.js

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' 
    });

See plnkr.

источник

2015-11-27 10:31:42 Vivek

$ rootScope.bodyClass не меняется, когда пользователь переходит на другую страницу

ответ

Смежные вопросы