个人中心
gpt4 book ai didi

javascript - 当用户转到另一个页面时，$rootScope.bodyClass 不会改变

转载 作者：行者123 更新时间：2023-11-28 01:20:53 24 4
gpt4 key购买 nike

我创建了一个 body 类，这样我就可以为不同的页面使用不同的 CSS:

homepage.js

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

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

是什么原因造成的，如何解决？

最佳答案

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

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>

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 .

关于javascript - 当用户转到另一个页面时，$rootScope.bodyClass 不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33954174/

24 4 0
文章推荐： javascript - 如何设置图像对象在特定步骤后停止移动
文章推荐： c++ - 在 OMNET++ 中收到来自前一个模块的所有消息后，如何将一个消息发送到下一个模块
文章推荐： c++ - 在调整 vector 大小时，有什么方法可以防止引用和对象之间的崩溃？
文章推荐： javascript - 使用 Canvas 缩放图像而不使其模糊
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com