Angular指令不会删除添加到元素的html

Question

我有一个指令被添加到其他元素，用于将html注入弹出窗口。当单击弹出的任何按钮时，指令应从dom中删除弹出窗口。

我遇到的问题是对popover元素的.remove（）调用没有从DOM中删除该元素。其他代码，调用相同的方法来删除所述popover工程。当弹出窗口本身进行该调用时，它就不起作用。

指令：

(function () {
    'use strict';
    angular.module('my.module')
        .directive('assetActionPopover', ['$compile', '$timeout', function ($compile, $timeout) {
            return {
                scope: {
                    editAction: '&',
                    copyAction: '&',
                    deleteAction: '&',
                    createPresentationAction: '&'
                },
                restrict: 'A',
                transclude: false,
                compile: function compile(element) {
                    element.attr('ng-click', 'showPop()');

                    element.removeAttr('asset-action-popover');
                    element.removeAttr('data-asset-action-popover');

                    return{
                        post: function postLink(scope, element) {
                            $compile(element)(scope);
                            scope.showPop = function () {
                                if (angular.element('.pop').length === 0) {  //this is the popover's style, there should only be one at any time
                                    // <nav class="pop"><ul> see showPopover()
                                    scope.showPopCover();
                                    scope.showPopover();
                                }
                            };

                            var template = '<nav class="pop"><ul>' +
                                '<li ng-click="editAction(); removeMe();"><span class="icon edit"></span>Edit</li>' +
                                '<li ng-click="deleteAction()"><span class="glyphicon glyphicon-remove ng-click="deleteAction()"></span>Delete</li>' +
                                '<li ng-click="copyAction()"><span class="glyphicon glyphicon-asterisk"></span>Copy</li>' +
                                '<li ng-click="createPresentationAction()"><span class="glyphicon glyphicon-asterisk"></span>Create Presentation</li>' +
                                '</nav>';

                            //adds a background element to the body tag that covers
                            //an area and sets itself up for a click handler to then remove itself
                            scope.showPopCover = function () {
                                var popCover = angular.element('<div class="pop-cover" ng-click="removePopCover()"></div>');
                                var popCoverEl = $compile(popCover)(scope);
                                angular.element(document.body).append(popCoverEl);
                            };

                            //shows the popover in the same general area of the DOM element that
                            //that this directive is attached to
                            scope.showPopover = function () {

                                var popEl = $compile(template)(scope);
                                //apply a class that can be used in css to determine things at run time (like visibility)
                                //and append to the element that we are attached to
                                element.addClass('pop-parent-show').append(popEl);
                            };

                            //this works to remove both the "cover" div and the menu created by the temaplate
                            scope.removePopCover = function () {
                                angular.element('.pop-cover').remove();
                                angular.element('.pop').remove()
                                element.removeClass('pop-parent-show');
                            };

                            //this does not work
                            scope.removeMe = function () {
                                angular.element('.pop').remove();
                            };
                        }
                    };
                }
            };
        }]);
})();

用法：

<article asset-action-popover editAction="foo()" copyAction="bar()" deleteAction="bam()"></article>