javascript - 使用 Angular 通过 DOM 检查类是否存在

Question

我有一堆页面遵循相同的布局，但其中一些页面的顶部有一个“辅助”导航栏。当这个导航栏存在时，我必须在 less 中使用 margin-top 将主要内容从页面向下推。

我的问题是我无法找到一种仅通过 DOM 执行此操作的简洁方法。

sample.html

<!-- The secondary navigation below the header -->
<div class="navigation-row text-center">
    <div class="col-xs-offset-2 col-xs-8 text-center">
        <h4> Sample Page </h4>
    </div>
</div>

<!-- Main Content -->
<div class="row">
    ...

index.html(每个页面都使用的继承模板)

<!-- Main Content -->
<div class="content container-fluid">
    <div ng-class="{'secondary-nav' : document.getElementsByClassName('navigation-row').length > 0}" ui-view="main"></div>
</div>

所以基本上在我的主要内容部分，我试图检查页面上是否存在 navigation-row 类(navigation-row 是辅助导航栏的类)，如果存在则添加类 secondary-navbar-padding 到 div。

我试过使用 angular.element看起来像

<div class="row" ng-class="angular.element($document).hasClass('navigation-row') ? 'secondary-navbar-padding' : ''">

但是没有用。这甚至可以做到吗？我是不是在错误地处理这个问题，或者如果有一个更好更清洁的方法来做到这一点的建议，我也愿意这样做。

Answer 1

我认为您只是在检查 document 元素本身是否具有该类。

您可以像这样计算具有该类的元素的数量:

document.getElementsByClassName('navigation-row').length

所以你可以这样使用ng-class:

<div class="row" ng-class="{'secondary-navbar-padding' : document.getElementsByClassName('navigation-row').length > 0}">