AngularJS无法清除ng-include创建的子范围 [英] AngularJS not cleaning child scope created by ng-include

问题描述

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

I have the following use case - I provide a dialog service where I put a different content depending on the context. In the service method i manually compile a dom element and use it to display dialog using jquery ui. The code is the following:

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

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

And then I fire a scope event that should be handled by a scope function defined in the controller

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

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

then I open the dialog and the user performs something and closes the dialog. When the dialog gets closed i remove the "config-dialog" element from the DOM. Like this:

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

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

However the next time the dialog gets opened and a new controller gets instantiated i see that the 'config-open' gets handled twice, when open the dialog again it gets handled 3 times. That means the scope attached to the ng-include that I dynamically create is not destroyed. I've debugged with Batarang and saw that really the child scope created by ng-include is not cleaned. AFAIK AngularJS scopes are associated to dom elements and when I remove the element, the scope should be garbage collected but this doesn't happen. My question is - is AngularJS supposed to clean up the scope in my case. What am I doing wrong and is there a more proper way to implement my use case?

推荐答案

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

The controller is only for the dialog content. OK and cancel buttons for the dialog are handled outside of the dialog content

我想您的HTML看起来像这样:

I suppose your HTML looks like this:

<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):

Try: angular.element(domElement).scope() Like this (using jquery with delegated event because you're creating your DOM dynamically):

$(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();
});

这篇关于AngularJS无法清除ng-include创建的子范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！