AngularJs

Question

如何在 UI-Bootsrap 的标签导航中替换或添加新的 class。我期待类似的东西，

<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>

我已经尝试了以下方法，但是，它将 class 添加到父级，

<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>

Answer 1

好的，ui bootstrap 模块不支持您不想做的事情，因此我们需要扩展模块以获得请求的行为。为此，我们将使用装饰器：

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

这采用了 tabset 指令的旧 link 方法，并用自定义方法包装它，除了旧方法之外，该方法还将 custom-class 属性的值绑定到范围。我们需要做的第二件事是覆盖模板以实际使用 scope.customClass 参数：

有多种方法可以使用 $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>

笨蛋: http://plnkr.co/edit/M3MgEPY6rfGuUda2a2N7?p=preview

AngularJs - 在 UI-Bootstrap 的选项卡上添加自定义 class

AngularJs - Adding Custom class on UI-Bootstrap's Tab

javascript

angular-ui-bootstrap

bootstrap-tabs