нг-класс не работает в одной ситуации.Каковы некоторые возможные причины этого? - PullRequest
Новая
       8

нг-класс не работает в одной ситуации.Каковы некоторые возможные причины этого?

0 голосов
/ 01 декабря 2018

Я застрял.Не могу понять это.Этот вопрос очень просто показать, но я не совсем уверен, как его сформулировать, поэтому постараюсь.

Во-первых, вот макет всего моего приложения (проблема заключается в Header.jsp): 

<jsp:include page="../home/Header.jsp" />
<jsp:include page="../home/Modals.jsp" />
<div data-ng-view data-save-scroll-position data-position-relative-to-menu></div>
<jsp:include page="../home/Footer.jsp" />

Проблема очень проста.У меня есть следующее data-ng-class в разделе data-ng-view, которое меняет вкладку на активную, если что-то верно (проблема в том, что она не будет работать ни в одном сценарии, даже если в названии вкладки отображается true): 

<ul class="nav nav-tabs">
    <li role="presentation" data-ng-class="tab.isSelected ? 'active' : ''" data-ng-repeat="tab in ctrl.tabs" 
        data-ng-click="ctrl.fetchBIReports(tab)">
        <a href="" data-ng-bind="::tab.isSelected"></a>
    </li>                 
</ul>

В JSP, который использует data-ng-include для вышеупомянутой разметки, есть боковая навигация, чтобы перейти на эту страницу.После нажатия на эту боковую навигацию он выделил вкладку 'active', как и ожидалось (пытаясь не включать весь jsp): 

<div class="side-navbar">
    <ul>
        <li class="{{ ctrl.navigate.path == 'bi/schedule' ? 'active-link' : 'normal-link'}}">
            <a href="#/bi" data-ng-click="ctrl.changeNavigation('bi/schedule')">Schedule Reports</a>
        </li>
   </ul>
</div>
<div class="content-right" data-ng-include="ctrl.navigate.path"></div>

content-right включает JSP, упомянутый во второй разметке.

Пока все хорошо.Вот демонстрация того, как это работает (включая side-navbar и content-right):

enter image description here

Проблема в том, что в моем Header.jsp естьпанель навигации, которая ведет меня на ту же страницу.Если он нажимается с другой страницы с другим контроллером, то он работает.Но если я нахожусь в текущем контроллере и щелкаю по этой ссылке навигационной панели, тогда data-ng-class не принимает 'active' в качестве своего класса.Вот разметка для Header.jsp для этой ссылки: 

<li class="dropdown" data-roles="['ROLE_ADMIN']">
    <a href="#/bi" class="dropdown-toggle" data-toggle="dropdown" data-ng-click="ctrl.changeNavigation('bi/schedule')" 
        role="button" aria-haspopup="true" aria-expanded="false">BI Management<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#/bi" data-ng-click="ctrl.changeNavigation('bi/schedule')">Schedule Reports</a></li>
        </ul>
</li>

Вот демонстрация того, что он не работает, даже если он печатает true в пользовательском интерфейсе:

enter image description here

Единственная проблема с этим пользовательским интерфейсом.Все данные заполнены.Записи отображаются для правильной вкладки.Четная боковая навигационная панель отображает правильный активный класс.

1 Ответ

0 голосов
/ 03 декабря 2018

Ваш синтаксис для ng-class немного отключен.Формат: "{'[имя-класса]': [выражение, которое оценивается как true или false]}".Вы можете иметь несколько значений класса, разделенных запятыми, каждое из которых имеет собственное выражение.Когда выражение истинно, соответствующий класс применяется к элементу, а когда ложно, класс удаляется из элемента.То, как вы это написали, будет почти работать для простого атрибута class, но вам нужно будет включить символы интерполяции: {{ и }}.Вот очень простой пример для иллюстрации ng-class. 

angular.module('app', []);
.red {
  color: #fff;
  background-color: #e21d1d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <label>
    <input type="checkbox" ng-model="applyRedClass" /> Apply 'red' class
  </label>
  <div ng-class="{'red': applyRedClass}">
    This is a simple example of how to use ng-class.
  </div>
</div>
...