angular.ui引导程序中的CSS样式标签

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> li> a格式，并在css文件中回答有关样式的问题，请添加ul li {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>