如何正确清理Angular指令的子范围

Question

背景：我正在创建一个基于angularstrap的bgDropdown的指令。我的目标是创建一个类似的小部件HTML选择元素，但每个元素都有自定义模板。

小部件工作正常。但是使用Batarang发现，无论何时用户显示下拉列表，子域都会被创建并且永远不会被销毁。因此，每次显示下拉列表时，都会创建越来越多的子范围。

我需要了解如何正确清洁儿童示波器。

样本插件：http://plnkr.co/edit/xP6HS9?p=preview

Step 1: Before first click.

Step 2: After first click and after to closed.

Step 3: After various opens and closes.

Answer 1

我认为这实际上是$tooltip服务的问题，因为我能够看到同样的事情发生在AngularStrap本身的dropdown demo中。

在显示下拉列表时，$tooltip.show()将克隆下拉模板并每次链接相同的范围，请参阅tooltip.js#L198

tipElement = $tooltip.$element = tipLinker(scope, function(clonedElement, scope) {});

在$tooltip.hide()中，没有代码可以破坏模板内部创建的范围（例如ng-repeat），因此会出现问题。

我能想象的最简单的解决方法是为ng-controller模板指定rnDropdown.item.tpl.html：

<ul tabindex="-1" class="dropdown-menu" role="menu" rn-same-width ng-controller="rnDropdownItemCtrl">

然后在控制器中监听$destroy事件，以便在删除下拉列表时销毁其范围：

.controller('rnDropdownItemCtrl', function ($scope, $element) {
  $element.on('$destroy', function () {
    $scope.$destroy();
  });
})

示例Plunker： http://plnkr.co/edit/j74pms?p=preview