如何從指令元素中刪除Angular Watcher？

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時，代碼可以很好地顯示並刪除popup元素。 但是，問題是每當元素顯示和隱藏時，角度觀察器就一直在增加。 觀察者增加的數量取決於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將返回未綁定的函數。