javascript - $ compile:ctreq angular 代码错误

我正在尝试编写一个指令以在angular中创建制表符，但每次运行代码时它都会在控制台中提供$ compile：ctreq。
这是我的代码app.js

(function(window) {

angular.module('app', [])
.directive('tab', function() {
  return {
restrict: 'E',
transclude: true,
template: '<h2>Hello world!</h2> <div role="tabpanel" ng-transclude></div>',
require: '^tabset',
scope: {
    heading: '@'
},
link: function(scope, elem, attr,tabsetCtrl) {
     //tabsetCtrl.addTab(scope)
}
  }
})
 .directive('tabset', function() {
return {
restrict: 'E',
transclude: true,
scope: { },
templateUrl: 'tabset.html',
bindToController: true,
controllerAs: 'tabset',
controller: function() {
    var self = this
    self.tabs = []

    /* self.addTab = function addTab(tab) {
      self.tabs.push(tab)
    } */
    }
  }
})
})(window);

这是我的index.html

<html>
<head>
<title>Tabs Directive</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
  <h1>Tabs, tabs, tabs!</h1>
 </tabset>
 <tab heading="Tab 1">
   Lorem ipsum dolor sit amet, ut eam nullam utroque liberavisse, ea
  </tab>
 <tab heading="Tab 2">
    Just another tab!
 </tab>
 </tabset>
</body>

这是我的tabset.html

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"
      ng-repeat="tab in tabset.tabs">

      <a href=""
        role="tab"
        ng-click="tabset.select(tab)">{{tab.heading}}</a>
    </li>
    </ul>

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

我不明白我在做什么错。
其实我有目标

创建一个像chrome这样的标签系统。我可以在其中动态添加标签，并且标签模板也将是动态的。
每个模板将具有不同的控制器。

最佳答案

index.html中的tabset标签都是关闭标签，这意味着angular不会编译tabset，并且tab指令不需要tabset：

 </tabset> <!-- closing tag should be <tabset> -->
 <tab heading="Tab 1">
   Lorem ipsum dolor sit amet, ut eam nullam utroque liberavisse, ea
  </tab>
 <tab heading="Tab 2">
    Just another tab!
 </tab>
 </tabset> <!-- closing tag -->