AngularJSテンプレートとui-routerを使用しているとき、異なるページに異なるボディー背景を設定します

私は2ページあり、私はui.routerを使って別のページにジャンプしています。 1つはログインページです。ログイン後、ページはホームページにジャンプします。background-colorをログインページに設定しますが、別の本体を別のボディに設定します。background-colorテンプレートdivの色を設定しただけでは、ボディの背景には適用されませんが、背景に直接色を設定すると、2つのページの色が同じになります。私に何ができる？AngularJSテンプレートとui-routerを使用しているとき、異なるページに異なるボディー背景を設定します

HTML：

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

JS：（<html>又は<body>タグのいずれかに適用される）グローバルコントローラで

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

出典

2016-05-23 Wayne Li

'BG-color'インライン属性を使用して' homePage'テンプレートのルートタグ（ 'イオンview'タグでもよい）に'背景color'を追加します。またはCSSから。 – Harish

、イベントを登録します

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

出典

2016-05-23 06:51:47

インデックスページの場合：app.run.js用

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

、最初にこのコードを追加します。。

$rootScope.$state = $state;

CSS：

body.home-page { 
    background: yellow; 
} 

body.login-page { 
    background: blue; 
}

出典

2016-05-23 06:54:05 WorkWe

角度-ルータを使用している間、あなたのメインアプリからあなたは状態が変更されますときに、どの状態であなたを知るようになるだろう、$ statechangeSuccessイベントを取得しますであり、おそらく体にNGスタイルまたはngのクラスを使用して背景を変更：

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

出典

2016-05-23 06:55:11

AngularJSテンプレートとui-routerを使用しているとき、異なるページに異なるボディー背景を設定します

答えて

関連する問題