angularjs ng-repeat无法正确移除通过compile来的元素

LJERRY 发布于 2015/09/09 22:56
阅读 470
收藏 0

我在用ANGULARJS实现一个TAB控

<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>
ch-pane的模板如下

<div class="tab-pane" style="margin-top:10px">
</div>
只是个占位符,在他link时会动态的往里面加一个由compile来的元素

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

下面举个例子,发生了什么

当往panes这个集合中加第一个东西A时,对应的ch-pane假设里面产生了个A1元素,

然后同理加了B,ch-pane产生了个B1,

最后加C,ch-pane产生了个C1,

这时候把A从panes里移除,结果出现的情况是B对应的那个ch-pane里的元素变成了A1,C对应的ch-panes里的元素变成了B1


加载中
返回顶部
顶部