角UI选项卡：添加类到一个特定的标签 [英] Angular-UI Tabs: add class to a specific tab

问题描述

我要创建角UI以下标签：

I want to create the following tabs with Angular UI:

所以，我根据Bootstap的类名正在添加的样式/标记：

So, I'm adding the styles based on Bootstap's class names/markup:

.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;
}

（正如你看到的我需要在＆LT弥补填充;一个方式＆gt; A位之后，​​我添加超级脚本文本，否则向下压）

(As you can see I need to compensate padding on <a> a bit after I added super-scripted text, otherwise it is pushed down.)

接下来，我有以下的标记和放大器; code在 HTML / JS 文件：

Next, I have the following markup & code in html/js files:

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 }
  ];

};

那么，剩下的就是让角添加一个名为类新根据标签的正确元素上述数组定义。不幸的是，我没能弄清楚如何。

So, what's left is making Angular add a class named "new" on the correct element based on tabs array definition above. Unfortunately, I failed to figure out how.

正如你可以看到我试过纳克级={新：tab.new}（HTML中的code注释），但这个基本上打破了所有级的功能，产生不正确纳克级 atrribute在开发工具观看图像时：

As you can see I tried ng-class="{new: tab.new}" (commented in html code), but this essentially breaks all class features, producing incorrect ng-class atrribute when viewing it in Dev Tools:

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

这里的 Plunkr 。

推荐答案

@TyndieRock是正确的，你不能，据我所知，应用类引导-UI选项卡。任何NG-类被剥离并直接添加类引起的不良行为，并阻止任何试图注入到它。

@TyndieRock is right that you can't, as far as I'm aware, apply classes to bootstrap-ui tabs. Any ng-class is stripped and directly adding a class causes bad behavior and it blocks any attempt to inject into it.

我没有看到贴在GitHub上，要求自定义CSS支持的问题。所以，说不定哪天。

I did see an issue posted on github asking for custom css support. So maybe someday.

@ TyndieRock的解决方案，让你更接近，但不会让你的所有道路。寻找荣誉设置页，标题。虽然他的语法只是稍微偏离。

@TyndieRock's solution gets you closer but doesn't get you all the way. Kudos for finding tab-heading. Although his syntax is just slightly off.

这就是我想你会想：

 <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内容的工作这么好。

This will let style the text. But it doesn't work so well for your css content.

您可能想要做自己的自定义选项卡。这是一个麻烦，但是这会给你你正在寻找的控制。

You might want to do your own custom tabs. It is a hassle but that'll give you the control you're looking for.

这篇关于角UI选项卡：添加类到一个特定的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！