Question

我有两页，我正在使用ui.router跳转到不同的页面。一个是登录页面，登录后，页面将跳转到主页。我想为登录页面设置一个正文background-color，但为另一个设置另一个正文background-color。如果我只是为模板div设置颜色，颜色将不会应用于正文背景，但如果将颜色直接设置为背景，则两个页面具有相同的颜色。我该怎么办？

HTML：

 <body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <!-- build:js scripts/main.js -->
</body>

JS：

angular.module('app',[....]).config(function ($stateProvider,$urlRouterProvider) {
    $stateProvider
        .state('login',{
            url:'/',
            views:{
                'content':{
                    templateUrl:"views/login.html",
                    controller:"LoginController"
                }
            }
        })
        .state('home',{
            url:'/home',
            views:{
                'header':{
                    templateUrl : "views/header.html",
                    controller: 'HeaderController'                                             
                },
                'content':{
                    templateUrl: "views/homePage.html",
                    controller : 'HomeController'
                }
            }
        })

Answer 1

在全局控制器（适用于<html>或<body>标记）中，注册一个事件：

myApp.controller('GlobalCtrl', function($scope) {
    // Event listener for state change.
    $scope.$on('$stateChangeStart', function(event, toState, toParams) {
        $scope.bodyClass = toState.name + '-page';
    });
});

现在，在你的HTML中：

<body class="{{bodyClass}} foo bar" ng-controller="GlobalCtrl">
   <!-- your content -->
</body>

现在，在你的CSS中：

body.login-page {
    background: green;
}

body.home-page {
    background: red;
}

Answer 2

索引页面：

<body ng-class="{'home-page': $state.includes('home'), 'login-page' : $state.includes('login')}">
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <!-- build:js scripts/main.js -->
</body>

对于app.run.js，请先添加此代码。

$rootScope.$state = $state;

CSS：

body.home-page {
  background: yellow;
}

body.login-page {
  background: blue;
}

Answer 3

使用angular-router时，您的主应用程序将获得一个事件 $ statechangeSuccess ，当状态发生变化时，您将了解您的状态，并可能使用<更改背景<正文上强> ng风格或 ng-class ：

HTML

<body ng-class='{$scope.state==="home":class1,$scope.state==="login":class2}'>

JS

    app.controller('appCtrl', function($scope) {
      $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
        console.log(event, toState, toParams, fromState, fromParams);
$scope.state = toState;//do the checking
      });
    });

使用AngularJS模板和ui-router时，为不同的页面设置不同的正文背景

3 个答案: