Question

我的指令看起来像这样：

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时，代码可以正常显示并删除弹出元素。但是，问题是每当元素显示＆amp;隐藏，角度观察者只是继续增加。观察者增加的数量取决于template_html中的绑定数量。

如何在移除弹出窗口时删除这些观察者，以便观察者不会随着时间的推移而累积。

Answer 1

您是否尝试在删除弹出窗口时销毁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();
    }
});

Answer 2

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

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

并确保您的控制器可以从您的指令访问，然后您可以调用myWatcher()来取消绑定您的观察者，因为调用watch将返回未绑定的函数。

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

2 个答案: