我有一堆页面遵循相同的布局,但是其中一些页面的顶部有一个“辅助”导航栏。当该导航栏存在时,我必须使用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' : ''">


但这没用。这有可能吗?如果我处理方法不正确,或者是否有更好的清洁方法的建议,我也愿意这样做。

最佳答案

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

您可以使用该类计算元素的数量,如下所示:

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


因此,您可以通过以下方式使用ng-class

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

07-24 09:50
查看更多