如何在没有控制器的情况下使用 ng-class？

Question

所以，我有这个主 div，它包装了正文代码：

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

对于哪个页面我有一个带有页面名称的修饰符：

错误页面：

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

活动页面：

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

预订页面：

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

main 总是在 layout.html 中，因为它总是出现在每个页面上。如何动态插入类通讯录？

我应该为此创建一个 MainController 吗？它有一些聪明的方法来做到这一点，而不必为此创建一个控制器？

更新 --

这是我的 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>

在带有 ui-view 的 div 中，Angular 会附加我的页面，我有 3 个：error.tmpl.html、events.tmpl.html 和 bookings.tmpl.html

我的通用 app.js，我在路由中注册了 angular 模块：

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

在我的 html 模板中，我有一个很小的 ​​html，它将附加在 ui-view 中。

问题是我需要更改，如果我访问错误页面，我需要添加类'main--error'，如果我访问事件页面，我需要添加类'main--events'和如果我访问预订页面，我需要添加类'main--bookings'

Answer 1

将自定义元素和属性保留给角度指令是传统的做法。该指令将自动将main 类添加到顶级<main> 和main main--statename 到属于视图模板的元素。

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

虽然对我来说它看起来设计过度，但手工编写一些类并没有错。如果有太多的工作，也许最好改变样式的组织方式。

Answer 2

看起来指令 'main' 将在其他控制器中，因此 ng-class 变量将被放置在那里。

在您的 Main Bookings 控制器中：

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

在您的 HTML 中

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