Question

在以角度方式多次打开模态时，我遇到了一些性能问题，并且我发现每次要求对话框服务创建新模态时，范围内的观察者数量都会急剧增加。

DialogService如下：

.factory("DialogService", function($q, $compile){
        return {
            toast:function(text){
                Dialog.toast(text);
            },
            alert:function(text){
                var deferred = $q.defer();
                var d = Dialog.alert(text);
                d.bind("hide", function(){
                    deferred.resolve();
                });
                return deferred.promise;
            },
            showModal:function(options){
                var dialog = new Dialog(options);
                dialog.show(function(){
                    var self = this;
                    if ( "scope" in options ) $compile(self.contentLayer)(options.scope);

                    options.scope.dismiss = function(){
                        dialog.hide();
                    }   
                });
                if ( "hide" in options ){
                    dialog.bind("hide", options.hide);
                }
            },...

我面临的问题是，每次创建新模态时，当我使用指令时，它会使用新的观察者来调整范围。

我通过添加观察者来解决大部分问题，这些观察者在我的自定义指令中销毁节点时删除了观察者，但ng-repeat，ng-if等等......在模态内容中每次调用showModal时都会添加观察者

现在，我甚至不确定应该尝试什么方法。

现在我正在尝试删除使用对话框创建的观察者，但我没有成功，所以我将不胜感激任何帮助。

Answer 1

花了我一些时间，但最后我能够达到理想的行为

首先，不是直接将范围传递给对话框服务，如问题所示，最好从选项中传递的范围创建子范围。

这样，每次调用$ compile来构建模态时，它都不会用监视器和其他东西污染父作用域，并且当模态关闭时很容易破坏新创建的作用域。

服务的结果代码如下所示：

angular.module("app", [])
    .factory("DialogService", function($q, $compile){
        return {
            toast:function(text){
                Dialog.toast(text);
            },
            alert:function(text){
                var deferred = $q.defer();
                var d = Dialog.alert(text);
                d.bind("hide", function(){
                    deferred.resolve();
                });
                return deferred.promise;
            },
            showModal:function(options){
                var childScope;
                var dialog = new Dialog(options);
                dialog.show(function(){
                    var self = this;    
                    if ( "scope" in options ){
                        var childScope = options.scope.$new();
                        $compile(self.contentLayer)(childScope);

                        options.scope.dismiss = function(){ 
                            dialog.hide();
                        }

                        dialog.bind("hide", function(){
                            childScope.$destroy();
                        });
                    }   
                });
                if ( "hide" in options ){
                    dialog.bind("hide", options.hide);
                }   
            },
            confirm:function(text){
                var deferred = $q.defer();
                Dialog.confirm(text, function(){
                    deferred.resolve();
                }, function(){
                    deferred.reject();
                });
                return deferred.promise;
            }
        }
    })
;

<强>附加

此时，我认为我已经解决了这个问题，但是通过控制台日志我可以看到每次打开新对话框时仍会运行越来越多的摘要周期，尽管这次手表保持不变。

发生的事情是我有很多自定义指令;我非常小心在每个指令的链接函数末尾添加以下行，以避免在上述情况下出现性能问题：

var watchers = [
     $scope.$watch(...),
     $scope.$watch(...),
     ...
];
...
var observer = new MutationObserver(function(mutations) {
    if (!document.body.contains($element[0])){
        observer.disconnect();
        dropdown.remove();
        for ( var i = 0; i < watchers.length; i++ ){
            watchers[i]();
        }
        $scope.$destroy();
        return;
    }
});  
var config = { childList: true, subtree: false  /*attributes: true, characterData: true*/ };
observer.observe(document.querySelector('body'), config);

看起来很好，对吧？嗯...大部分时间都有效，但是当我在指令中有这样的东西时（那就是这种情况）：

var clickHandler = function(event){
    var isChild = $($element).has(event.target).length > 0 || $(dropdown).has(event.target).length > 0;
    var isSelf = $element[0] == event.target || dropdown == event.target;

    $scope.$apply(function(){
        if (!isChild && !isSelf) {
            $scope.mdSelectCtrl.dismiss();
        }
    }); 
}

$document.bind('click', clickHandler);

它在每个$ compile上添加了click事件，click事件导致了另一个摘要周期（即使范围已经被破坏，此时也不想深入挖掘）;考虑到我可以在模态内容中轻松使用相同的指令10-15次，这意味着每次调用$ compile都会导致在每次点击时出现大量的摘要周期，从而导致性能下降。

解决方案很简单：在销毁指令范围时删除DOM事件侦听器：

var observer = new MutationObserver(function(mutations) {
    if (!document.body.contains($element[0])){
        observer.disconnect();
        dropdown.remove();
        for ( var i = 0; i < watchers.length; i++ ){
            watchers[i]();
        }
        $scope.$destroy();
        $document.unbind('click', clickHandler);
        return;
    }
});

注意

更改对话框服务后，我意识到可能不需要MutationObserver来跟踪节点是否仍然存在，我可以改为：

$scope.$on("destroy")

但我觉得今天不再需要更改代码来测试它。

如何在$ compile之后删除由angular指令创建的观察者

1 个答案: