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