多指令 - 从范围方法

Question

我正在尝试创建两个指令：clonable和removable。 这些将显示副本和删除按钮，如果点击将被复制和/或从dom中删除。

我面临的问题，如果复制它是错误的元素！ 如果我复制div，它实际上会复制图像！

app.directive('removable', function ($compile) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
            var removeBtn;
            $element.on('mouseenter', function (e) {
                e.preventDefault();
              console.warn("mouseenter-remove");    
                            console.warn($element)
                removeBtn = angular.element("<button ng-click='remove($event)'>Delete</button>");
                $element.append(removeBtn);
                $compile(removeBtn)($scope);

            });

            $element.on('mouseleave', function (e) {
                e.preventDefault();
                console.warn("mouseleave-remove");    
                            console.warn($element)
                                removeBtn.hide();
            });


            $scope.remove = function ($event) {
                            console.warn("remove");    
                            console.warn($element)
                $element.hide();
                removeBtn.remove();
            }          
        }
    };
});


app.directive('clonable', function ($compile) {
    return {
        restrict: 'A',

        link: function ($scope, $element, attrs) {
            var copyBtn;
            var copyTimeout;

            $element.on('mouseenter', function (e) {
 console.warn('mouseenter- copy');     
                console.warn($element);
                e.preventDefault();

                copyBtn = angular.element("<button ng-click='copy($event)'>Copy</div>");
                $element.after(copyBtn);
                $compile(copyBtn)($scope);

            });

            $element.on('mouseleave', function (e) {
            console.warn('mouseleave- copy');     
                console.warn($element); 
                e.preventDefault();
                                copyBtn.fadeOut("slow");
            });          

            $scope.copy = function ($event) {
console.warn('copy');     
                console.warn($element);                
                $element.after($element.clone());
                copyBtn.remove();
            }
        }
    };
});

这是jsfiddle。如果复制“TEST TEST”，它将实际复制图像