Angular-UI选项卡:将类添加到特定选项卡

Question

我想用Angular UI创建以下选项卡:

标签http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

所以,我正在添加基于Bootstap类名/标记的样式:

.nav-tabs > li.new > a {
  padding-top: 5px;
}
.nav-tabs > .new > a:after {
  content: "NEW";
  color: indianred;
  font-size: 10px;
  vertical-align: super;
  padding-left: 2px;
}

(正如你所看到的,我<a>在添加超文本文本后需要补偿填充,否则会被推下来.)

接下来,我在html/js文件中有以下标记和代码:

HTML:
<tabset>
    <tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active" ><!-- ng-class="{new: tab.new}"-->
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

JS:
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Tab 1", content:"Dynamic content 1" },
    { title:"Tab 2", content:"Dynamic content 2", active: true, 'new': true }
  ];

};

那么,剩下的就是让Angular "new"根据上面的tabs数组定义添加一个在正确元素上命名的类.不幸的是,我没弄弄出怎么样.

正如你所看到的那样我试过ng-class="{new: tab.new}"(在html代码中注释),但这实际上打破了所有类功能,ng-class在Dev Tools中查看它时会产生错误的atrribute:

ng-class="{new: tab.new} {active: active, disabled: disabled}"

这是Plunkr.

Answer 1

我不确定你是否可以将ng-class应用于这样的标签.尝试失败后,我决定查看选项卡的bootstrap-ui源,并做出与标题标题属性相关的有趣发现.如果将tab-heading作为子项放置到tab元素,显然可以将html放在标题部分中.

查看此处的tabheading指令.

这是他们展示的例子:

<tabset>
  <tab>
    <tab-heading><b>HTML</b> in my titles?!</tab-heading>
    And some content, too!
  </tab>
  <tab>
    <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
    That's right.
  </tab>
</tabset>

在你的情况下,我认为你可以做这样的事情来获得相同的效果:

<tab ng-repeat="tab in tabs" active="tab.active">
    <tab-heading>{{tab.title}} <span ng-show="tab.new">new</span></tab-heading>
    <div ng-include="tab.page"></div>
</tab>

Answer 2

@TyndieRock是对的,据我所知,你不能将类应用于bootstrap-ui标签.任何ng-class都被剥离,直接添加一个类会导致不良行为,并阻止任何注入它的尝试.

我确实在github上发布了一个问题,要求提供自定义css支持.总有一天也许.

@ TyndieRock的解决方案让你更接近,但不会让你一路走来.感谢寻找tab-heading.虽然他的语法略有偏差.

这是我认为你想要的:

 <tabset>
    <tab ng-repeat="tab in tabs">
    <tab-heading ng-class="{new:tab.new}">{{tab.title}}</tab-heading>
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

这将让文字风格化.但它对你的css内容效果不佳.

您可能想要自己创建自定义标签.这是一个麻烦,但它会给你你正在寻找的控制.

Answer 3

这个问题让我很生气,所以这就是我所做的自定义标签标题样式. 适用于Angular> = 1.1.5,因为它是唯一一个在表达式中具有三元运算符的人.

需要定位<tab>元素而不是标签标题.不幸的是,ng-class将不起作用,并与模板中的其他ng-class指令一起被破坏.

如果您尝试定位标签标题元素,您会发现没有太多可以使用它.CSS中没有父选择器,因此无法访问大多数操作正在进行的锚标记.

所以要拥有cookie并吃掉它:1)让你的样式成为由bootstrap tab指令生成的降序锚标记

2)使用这种模糊的语法应用该类:

 <tabset>
        <tab class="{{orderForm.detailsForm.$invalid ? 'invalid-tab' : 'valid-tab'}}">
            <div>CONTENT</div>
</tab>
</tabset>

然后它按预期工作,并将适当的类添加到<li>有趣<a>标记的父级.

总结:当ng-class行为不端并且存在插值问题时,请尝试更直接.

希望有人帮助.