如何在没有控制器的情况下使用ng类

How use ng-class without a controller?

本文关键字：情况下 ng 控制器      更新时间：2023-09-26

那么，我有这个主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和booking .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- booking '

通常会把自定义元素和属性保留给angular指令。该指令将自动将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());
    }
  };
});

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

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

在您的主预订控制器:

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

在你的HTML

<main class="main" ng-class="class.name"></main>
相关文章：