[英]AngularJs - Adding Custom class on UI-Bootstrap's Tab
How can I replace or add a new class on UI-Bootsrap's Tab Nav. 如何在UI-Bootsrap的Tab导航上替换或添加新类。 I'm expecting something like,
我期待这样的事情,
<ul class="MY-CUSTOM-CLASS" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
<li ng-class="{active: active, disabled: disabled}" heading="Justified" class="ng-isolate-scope">
<a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Justified</a>
</li>
.....
</ul>
I've tried the following but, it's adding the class to the parent, 我已经尝试了以下方法,但是将类添加到了父类中,
<tabset justified="true" class="tab-nav">
<tab heading="Justified">Justified content</tab>
<tab heading="SJ">Short Labeled Justified content</tab>
<tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>
Ok, what you wan't to do is not supported by the ui bootstrap module, so we need to extend the module to get the requested behavior. 好的,ui bootstrap模块不支持您不希望执行的操作,因此我们需要扩展模块以获取请求的行为。 To do that we will use decorators:
为此,我们将使用装饰器:
.config(function($provide) {
// This adds the decorator to the tabset directive
// @see https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L88
$provide.decorator('tabsetDirective', function($delegate) {
// The `$delegate` contains the configuration of the tabset directive as
// it is defined in the ui bootstrap module.
var directive = $delegate[0];
// This is the original link method from the directive definition
var link = directive.link;
// This sets a compile method to the directive configuration which will provide
// the modified/extended link method
directive.compile = function() {
// Modified link method
return function(scope, element, attrs) {
// Call the original `link` method
link(scope, element, attrs);
// Get the value for the `custom-class` attribute and assign it to the scope.
// This is the same the original link method does for the `vertical` and ``justified` attributes
scope.customClass = attrs.customClass;
}
}
// Return the modified directive
return $delegate;
});
});
This takes the old link
method of the tabset directive and wraps it with an custom method that in addition to the old method also binds the value of the custom-class
attribute to the scope. 这采用tabset指令的旧
link
方法,并用一个自定义方法包装它,该方法除了旧方法外还将custom-class
属性的值绑定到作用域。 Second thing we need to do is overriding the template to actually use the scope.customClass
parameter: 我们需要做的第二件事是覆盖模板以实际使用
scope.customClass
参数:
There are multiple ways to this either use the $templateProvider
or maybe simpler way use a <scrip type="text/ng-template">
: 有多种方法可以使用
$templateProvider
或更简单的方法使用<scrip type="text/ng-template">
:
<script id="template/tabs/tabset.html" type="text/ng-template">
<div>
<ul class="{{customClass}} nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
<div class="tab-content">
<div class="tab-pane" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">
</div>
</div>
</div>
</script>
Plunker : http://plnkr.co/edit/M3MgEPY6rfGuUda2a2N7?p=preview Plunker : http : //plnkr.co/edit/M3MgEPY6rfGuUda2a2N7?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.