How use ng-class without a controller?

Question

So, i have this main div, which wrapper the body code:

<main class="main">
</main>

And for which page i have a modifier with the name of the page:

Error page:

<main class="main main--error">
</main>

Events page:

<main class="main main--events">
</main>

Bookings page:

<main class="main main--bookings">
</main>

The main is always in the layout.html, because it will always be present on every page. How can i dynamically insert the class correspondent?

Should i create a MainController just for that? It has some clever way to do this without having to create a controller for just that?

UPDATE --

This is my layout.html:

<main class="main">
  <section class="navbar" ng-controller="NavbarCtrl" ng-hide="pageName('Erro')">
    <div class="navbar__container">
      <div class="navbar__header">
        <button class="navbar__toggle navbar__toggle--dashboard" data-sidebar-to="true">
          <span class="navbar__icon-bar"></span>
          <span class="navbar__icon-bar"></span>
          <span class="navbar__icon-bar"></span>
        </button>
        <form class="navbar__form navbar__form--dashboard" role="search">
          <input 
            class="navbar__search hide--mobile" 
            type="text" placeholder="Procure por algo...">
        </form>
      </div>
      <ul class="navbar__list">
        <li class="navbar__item">
          <a class="navbar__link" href="#" title="logout">
            <i class="icon icon__sign-out"></i>
            <span class="hide--mobile"> Sair </span>
          </a>
        </li>
      </ul>
    </div>
  </section>
  <div 
    class="breadcrumb" 
    ng-controller="BreadcrumbCtrl" 
    ng-hide="pageName('Painel') || pageName('Erro')">
    <div class="breadcrumb__container">
      <h2 class="breadcrumb__title"> {{ $state.current.name }} </h2>
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item breadcrumb__item--root"> Painel </li>
        <li class="breadcrumb__item"> {{ $state.current.name }} </li>
      </ol>
    </div>
  </div>
  <div ui-view></div>
</main>

In the div with the ui-view, the Angular will append my pages, i have 3: error.tmpl.html, events.tmpl.html and bookings.tmpl.html

My generic app.js, where i register the angular module in the routes:

'use strict';
var adminApp = function($stateProvider, $urlRouterProvider) {

    /* 
     * Booking Route
     *
     */
    var BookingCtrl = {
        url: '/',
        templateUrl: '/admin/booking/booking.tmpl.html',
        controller: 'BookingCtrl'
    };

    /* 
     * Event Route
     *
     */
    var EventCtrl = {
        url: '/eventos',
        templateUrl: '/admin/event/event.tmpl.html',
        controller: 'EventCtrl'
    };

    /*
     * Error Route
     *
     */
    var ErrorCtrl = {
        url: '/erro',
        templateUrl: '/admin/error/505.tmpl.html',
        controller: 'ErrorCtrl'
    };

    /*
     * Register the states
     *
     */
    $stateProvider
        .state('Bookings', BookingsCtrl)
        .state('Eventos', EventCtrl)
        .state('Error', ErrorCtrl);

    $urlRouterProvider.otherwise('/');
};

angular.module('adminApp', [
    'ui.router'
]).config(adminApp);

In my html templates i have this tiny html, which will be append in the ui-view.

The problem is that i need change the , if i access the error page, i need add the class 'main--error', if i access the events page, i need add the class 'main--events' and if i access the bookings page, i need add the class 'main--bookings'

Answer 1

It is conventional to reserve custom elements and attributes to angular directives. The directive will automatically add main class to top-level <main> and main main--statename to the elements belonging to view templates.

app.directive('main', function () {
  return {
    link: function (scope, element, attrs) {
      var view = element.inheritedData('$uiView');
      element.addClass('main');
      if (!view) return;
      element.addClass('main--' + view.state.name.toLowerCase());
    }
  };
});

Though it looks overengineered to me, there's nothing wrong with writing some classes by hand. If there's too much work with that maybe it is better to change the way the styles are organized.

Answer 2

Looked like directive 'main' will be inside other controllers, so the ng-class variable would be placed there.

In your Main Bookings controller:

$scope.class.name = 'main--bookings';

In your HTML

<main class="main" ng-class="class.name"></main>