Directive to display icons (Sal's initial)

Hover over a div or span with text, and display a list of icons to provide further options. 1) mouseenter - append icons 2) mouseleave - remove icons

by bob m

HTML

<!-- Sal's initial version -->
<div ng-app="app">
    <div>
        <div toggle-preview ico="plus delete folder" >item a</div>
        <div toggle-preview ico="plus delete folder" >item b</div>
        <div toggle-preview ico="plus delete folder" >item c</div>
    </div>
</div>

CSS

span {
    display: inline;
}

.add::after {
    display: inline;
    margin-left: 5px;
    content: url(http://umcmsuncoast.org/assets/components/discuss/themes/umcm/images/buttons/10x10/plus.gif);
}
   
.delete::after { 
    display: inline;
    margin-left: 5px;
 content:url(http://umcmsuncoast.org/assets/components/discuss/themes/umcm/images/buttons/10x10/delete.gif);
}
            
.folder::after { 
    display: inline;
    margin-left: 5px;
    content: url(http://umcmsuncoast.org/assets/components/discuss/themes/umcm/images/buttons/10x10/folder.gif);
}

img {
    margin-left: 5px;
}

JavaScript

var app = angular.module('app',
    [
    ]);

app.directive('togglePreview', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            
            var classes = attrs.ico.split(' ');
            
            elem.on('mouseenter', function(){
                angular.forEach(classes, function(e, i) {
                    
                    var node = $compile('<span ng-click="clickIco($event)"><img src="http://umcmsuncoast.org/assets/components/discuss/themes/umcm/images/buttons/10x10/' + e + '.gif" ico="'+ e +'"/><span>')(scope);

                    elem.append(node);
                })
            });
            elem.on('mouseleave', function(){
                elem.children().remove();
            });
            
            scope.clickIco = function($event){
                console.log($event.target.attributes.ico.value);
            }
        }
    }
}]);