AngularJS不清除ng-include创建的子范围

Question

我有以下用例 - 我提供了一个对话框服务,我根据上下文放置了不同的内容.在服务方法中,我手动编译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();

但是,下次打开对话框并实例化新控制器时,我会看到'config-open'被处理两次,再次打开对话框时会被处理3次.这意味着我动态创建的ng-include附加的范围不会被破坏.我已经使用Batarang进行了调试,发现实际上没有清除ng-include创建的子范围.AFAIK AngularJS范围与dom元素相关联,当我删除元素时,范围应该是垃圾收集,但这不会发生.我的问题是 - AngularJS应该在我的案例中清理范围.我做错了什么,是否有更合适的方式来实现我的用例？

Answer 1

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

我想你的 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>

尝试：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();
});