如何从指令元素中删除角度观察者

How to remove angular watcher from directive element?

本文关键字：删除 观察者 元素 指令      更新时间：2023-09-26

我有一个指令，看起来像这样：

app.directive('mydirective', function($compile,$document){
    var directive = {
        restrict: 'EA',
        scope:{
        },
        link: link, 
    };  
    return directive; 
    function link(scope, element, attr) {
        var template_html = "<div id='"popup'">{{popupTitle}}</div>";
        var template = angular.element(template_html);
        element.bind('click', function(){
                if(!$("#popup").is(':visible')){
                    var $popup = $compile(template)(scope);
                    $document.find('body').append($popup);
                }else{
                    $("#popup").remove();
                }
            });
        template.remove();
    }
});

当单击mydirective时，显示和删除弹出元素的代码运行良好。但是，问题是每当元素显示&隐藏，角度观察者只是不断增加。观察者数量的增加取决于template_html中绑定的数量。

当弹出窗口被删除时，我如何才能让这些观察者被删除，这样观察者就不会随着时间的推移而增加。

在删除弹出窗口时，您是否尝试过销毁else块内的作用域？

    element.bind('click', function(){
        if(!$("#popup").is(':visible')){
            var $popup = $compile(template)(scope);
            $document.find('body').append($popup);
        }else{
            $("#popup").remove();
            scope.$destroy();
        }
    });

要创建一个新的范围，你可以做一些类似的事情

var popupScope;
element.bind('click', function(){
    if(!$("#popup").is(':visible')){
        popupScope = $scope.$new();
        var $popup = $compile(template)(popupScope);
        $document.find('body').append($popup);
    }else{
        $("#popup").remove();
        popupScope.$destory();
    }
});

将watcher作为变量存储在控制器中：

var myWatcher = $scope.$watch(......

确保你的控制器可以从你的指令中访问，然后你可以调用myWatcher()，它将解除你的观察程序的绑定，因为调用watch将返回一个未绑定的函数。

相关文章：