ng-class在一种情况下不起作用。造成这种情况的可能原因是什么？

Question

我被困住了。无法解决这个问题。这个问题很容易显示，但是我不太确定如何提出这个问题，因此我会尽力而为。

首先，这是我整个应用程序的布局（问题在于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>

在使用data-ng-include进行上述标记的JSP中，有一个导航栏可以更改为该页面。单击此侧面导航后，它按预期突出显示了标签'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）：

问题是，在我的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>

即使它在用户界面中显示为真，这是它无法正常运行的演示：

唯一的问题是与此用户界面有关。填充所有数据。显示正确标签的记录。甚至侧面导航栏也显示正确的活动班级。

Answer 1

您对ng-class的语法有点偏离。格式为“ {''[class-name]'：[计算结果为true或false的表达式]}“。您可以使用多个逗号分隔的类值，每个值都有自己的表达式。如果表达式为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>