AngularJS 不清理由 ng-include 创建的子作用域

我有以下用例 - 我提供一个对话服务，根据上下文放置不同的内容。在服务方法中，我手动编译一个 dom 元素并使用它来使用 jquery ui 显示对话框。代码如下：

var _view = jQuery('<div id="config-dialog"><span ng-include="\'' +  $scope.configView + '\'" ng-controller="' + $scope.configController + '"></span></div>');
var _compiled = $compile(_view.contents())($scope);

然后我触发一个范围事件，该事件应该由控制器中定义的范围函数处理

$scope.$broadcast('config-open', $scope.config);

然后我打开对话框，用户执行某些操作并关闭对话框。当对话框关闭时，我从 DOM 中删除“config-dialog”元素。像这样：

$(this).dialog("destroy");
jQuery('#config-dialog').remove();

然而，下次打开对话框并实例化新控制器时，我看到“配置打开”被处理了两次，再次打开对话框时，它被处理了 3 次。这意味着附加到我动态创建的 ng-include 的范围不会被破坏。我用 Batarang 进行了调试，发现 ng-include 创建的子作用域确实没有被清理。 AFAIK AngularJS 作用域与 dom 元素相关联，当我删除该元素时，该作用域应该被垃圾收集，但这种情况不会发生。 我的问题是 - AngularJS 是否应该清理我的案例中的范围。我做错了什么，有没有更合适的方法来实现我的用例？

控制器仅用于对话框内容。确定和取消按钮 对话框的处理是在对话框内容之外进行的

我想你的 HTML 看起来像这样：

<div class="dialog">
    <div class="dialog-content" ng-controller="yourcontroller">
       ...your content here 
    </div>

    <button id="btnClose">Close</button>  //your button is outside your controller      
</div>

Try: angular.element(domElement).scope()像这样（使用 jquery 和委托事件，因为你正在动态创建 DOM）：

$(document).on("click","#btnClose",function(){
    var dialog = $(this).closest(".dialog");
    //call this to destroy the scope.
    angular.element(dialog.find(".dialog-content")[0]).scope().$destroy();
    //or angular.element(dialog[0]).scope().$destroy(); depending on where you attach your scope.
    //Destroy dialog
    dialog.dialog("destroy");
    dialog.remove();
});