How can I assign a specific class depending on the page?

P

pontiac3582015-07-23 16:21:31

Angular

pontiac358, 2015-07-23 16:21:31

How do I assign a class to the body tag depending on which page I'm on. For example page /mainPage
body assign class mainPage

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/main', {
        templateUrl: 'mainPage.html',
        controller: 'MainPage',
      }).
      when('/powerSky', {
        templateUrl: 'template/powerSky.html',
        controller: 'PowerSky'
      }).      
      otherwise({
        redirectTo: '/main'
      });
  }]);

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Arthur, 2015-07-23
@pontiac358

In the first comment, everything was right and succinctly said - through $rootScope - I'll just chew it.
The ngRoute module is just a regular config - you can shove whatever you want into this config. Give each page a unique ID or page category name:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/main', {
        id: 'main',
        title: 'Главная',
        category: 'rootPage',
        templateUrl: 'mainPage.html',
        controller: 'MainPage',
      }).
      when('/powerSky', {
        id: 'powersky',
        title: 'Всем повер-скай, посоны',
        category: 'contentPage',
        templateUrl: 'template/powerSky.html',
        controller: 'PowerSky'
      }).      
      otherwise({
        redirectTo: '/main'
      });
  }]);

Now, each time you change the page, in the main controller (which is common to all pages of the site), shove the config of the current page (current route) into the $rootScope parameter page :

app.controller('MainController', function($rootScope) {
  $rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
    var page = current.$$route;

    // присваиваем глобально
    $rootScope.page = page;
  });
});

Now, in the HTML template, insert the class for BODY :

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>{{page.title}}</title>
    </head>
    <body ng-class="page.id" ng-controller="MainController">
        <main ng-view></main>
    </body>
</html>

Or, if your pages are divided into some general categories, then we insert not the ID, but the name of the category (then you will need to write fewer classes in CSS):

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>{{page.title}}</title>
    </head>
    <body ng-class="page.category" ng-controller="MainController">
        <main ng-view></main>
    </body>
</html>

Well, the styles will be:

body {
    &.rootPage {
        background-color: #fff;
    }

    &.contentPage {
        background-color: #ddd;
    }
}

S

Sergey, 2015-07-23
Protko @Fesor

I would suggest doing this through a directive (the code is old, it should be updated):
https://gist.github.com/fesor/226fce4a4aee5fb30454

T

Timofey, 2015-07-23
@mr_T

Via $rootScope?