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

Question

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

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

我需要了解如何正确清洁儿童范围。

Step 1: Before first click.

第 1 步：原始

Step 2: After first click and after to closed.

第一次点击后

Step 3: After various opens and closes.

在此处输入图像描述

score 2 · Accepted Answer

我相信这实际上是一个$tooltip服务问题，因为我可以在AngularStrap 本身的下拉演示中看到同样的事情。

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

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

并且在中$tooltip.hide()，没有代码会破坏在模板内创建的范围（例如 by 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

1 回答 1