Question

我正在将网站迁移到AngularJS。原始站点使用Bootstrap，我希望使用Angular.ui引导程序来保留Bootstrap元素。但是，我在使用Angular.ui引导程序解决如何将CSS样式应用于选项卡方面遇到了一些问题。

原始HTML如下所示：

<div class="container-fluid">
  <div class="row">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs central">
      <li class="active"><a href="#tab-one" data-toggle="tab">Tab One</a></li>
      <li><a href="#tab-two" data-toggle="tab">Tab Two</a></li>
    </ul>
  </div>
</div>
<!-- Tab panes -->
<div class="container">
  <div class="row tab-content central">
    <div class="tab-pane fade in active col-lg-12" id="tab-one">
      <div class="row features animated fadeInLeft">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120"/></div>
          <h3>Some explanation</h3>
          <p>Some text.</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131"/></div>
          <h3>Some more explanation</h3>
          <p>Some more text.</p>
        </div>
      </div>
    </div>
    <div class="tab-pane fade col-lg-12" id="for-contractors">
      <div class="row features animated fadeInRight">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120" alt="What we do"/></div>
            <h3>Some explanation 2</h3>
            <p>Some text 2.</p>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131" alt="Our mission"/></div>
            <h3>Some more explanation 2</h3>
            <p>Some more text 2.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这会导致选项卡窗格在页面宽度上运行，有两个居中的选项卡，并且选项卡中的所有内容都居中。

使用Angular.ui，代码使用指令，看起来更干净，但我无法应用与中心相关的CSS样式。

<div class="contained-fluid">
  <div class="row central">
    <tabset>
      <tab>
        <tab-heading>Tab One</tab-heading>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120"></div>
          <h3>Some explanation</h3>
          <p>Some text.</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131"/></div>
          <h3>Some more explanation</h3>
          <p>Some more text.</p>
        </div>
      </tab>
        <tab heading="Tab Two">
          <div class="row tab-content central">
            For Contractors
          </div>
        </tab>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120" alt="What we do"/></div>
            <h3>Some explanation 2</h3>
            <p>Some text 2.</p>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131" alt="Our mission"/></div>
            <h3>Some more explanation 2</h3>
            <p>Some more text 2.</p>
          </div>
      </tabset>
    </div>
  </div>

我应该如何将CSS类应用于Angular Directives？

Answer 1

您以与正常应用CSS相同的方式应用CSS：

.nav-tabs {
    /* custom styling */
}

因为angular会在事后编译指令，所以我使用浏览器的Inspector来查看类：（来自http://angular-ui.github.io/bootstrap/#/tabs）

<tabset><tab>汇编成：

<ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
    <li ng-class="{active: active, disabled: disabled}" heading="Static title" class="ng-isolate-scope active">
        <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Static title</a>
    </li>
    ...

tabset还有vertical和justified个选项，如果这是您正在寻找的内容

Answer 2

如果您使用下面的代码，它将节省您一些时间，并编译为相同的ul＆gt; li＆gt;格式并回答关于css文件添加中的样式的问题 ul li a {font-size：x-large;} 当然，您需要一个标签控制器以及标题和html页面列表，以包含在标签

中

 <div data-ng-controller="TabCtrl" class="col-md-12">
     <tabset id="tabs1">
        <tab data-ng-repeat="tab in tabs" heading="{{tab.title}}" >
            <div data-ng-model="tab"  data-ng-click="isSelected($index)" data-ng-change="update()">
                <div ng-include="tab.url">                    
                </div>                               
            </div>                        
         </tab>
    </tabset>
 </div>

angular.ui引导程序中的CSS样式选项卡

2 个答案: