Javascript angularjs ng repeat can'；从集合中删除项时，不能处理已编译的子元素

我想使用创建选项卡控件

<ul class="nav nav-tabs" ng-show="panes.length > 0">
  <li ng-repeat="pane in panes track by $index" ng-class="{active:pane.selected}">
    <a href="#" ng-click="select(pane)">
      {{pane.title}}<i class="fa fa-close" ng-click="close(pane)" style="margin:0px -8px 0px 15px" ></i>
    </a>
  </li>
</ul>

<div class="tab-content">
  <ch-pane ng-repeat="pane in panes track by $index" ng-show="pane.selected">
  </ch-pane>
</div>

在link函数中，当创建新的ch窗格时，作为另一个自定义指令的已编译元素将附加到ch窗格的div中

将项目添加到窗格集合时，代码正常工作。但从窗格集合中删除项目时失败。 情况是：（每个项目都是一个选项卡） 1.将项A添加到窗格中，其ch窗格将附加一个已编译的元素A1 2.将项B添加到窗格中，其ch窗格将附加一个已编译元素B1 3.将项C添加到窗格中，其ch窗格将附加一个已编译元素C1

---

4.从窗格中删除A，结果是选项卡B显示A1和选项卡C显示B1

无法从代码中看到任何问题。你能在JSFIDLE/jsbin上做一个简短的演示吗？对不起，我是新的js开发人员，我正在jsbin上设置环境，这里是链接。复制步骤为：1。单击项目1和项目2。单击子项1和3。单击子项2和4。单击子项1选项卡上的关闭（选项卡标题=内容商品）您将看到“我是内容商品内容窗格p”位于选项卡“内容2窗格”下，通过从所有

ng repeat

中删除

track by$index

进行修复，可能与删除elementCOOL期间更改的

$index

有关！！！非常感谢@Icycool

<div class="tab-pane" style="margin-top:10px">

directive('chPane', function($compile) {
return {
  restrict: "E",
  templateUrl: 'chassis/template/tab_pane.html',
  link: function(scope, element, attrs) {
    angular.element(element.children()[0]).append($compile(scope.pane.directive)(scope));
  },
};
})