javascript - 如何在没有 Controller 的情况下使用 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 中，因为它总是出现在每个页面上。如何动态插入类(class)通讯员？

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

更新--

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

通常将自定义元素和属性保留给 Angular Directive(指令)。该指令会自动添加 main类到顶级<main>和main main--statename属于 View 模板的元素。

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

尽管对我来说它看起来有些过度设计，但手动编写一些类并没有什么问题。如果需要做的工作太多，也许最好改变样式的组织方式。