扩展AngularUI Bootstrap指令

Question

我的应用程序中有一些标签，我正在使用一些非常相似的标记。

<div data-tab>
  <div data-tab-heading>
    <i class="fa fa-bars visible-xs-inline"></i>
    <span class="hidden-xs">Text</span>
  </div>

  <div>Text</div>
</div>

我想弄清楚的是如何将其解析为自己的指令，我是否需要使用compile选项来避免根元素上的多个模板（myTab，tab）？

function myTab() {
  return {
    compile: function (tElement, tAttrs, transclude) {
      // put the AngularUI tab directive on the root element here?
    },
    replace: true,
    restrict: 'AE',
    scope: {
      faClass: '@',
      heading: '@'
    },
    templateUrl: 'app/layout/directives/tab.html',
    transclude: true
  };
}

tab.html：

<div>
  <div data-tab-heading>
    <i class="fa {{faClass}} visible-xs-inline"></i>
    <span class="hidden-xs">{{heading}}</span>
  </div>

  <div data-ng-transclude></div>
</div>