Directive to display icons #2 (Floribon's)

Click on item and display a list of icons to provide further options. 1) mouseenter - append icons 2) mouseleave - remove icons

by bob m

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<div ng-app="app">
    <div data-ng-controller="NavBarCtrl as nav">
        <ul style="list-style-type:none;">
            <li ng-repeat="item in nav.items">
                <span tabindex="-1" ng-click="nav.onItemSelect(item)" ng-blur="nav.selected = null">
                    <span>{{item}}</span>
                    <data-toggle-me ng-show="nav.selected === item"></data-toggle-me>
                </span>
            </li>
        </ul>
    </div>
</div>

CSS

span {
    display: inline;
    outline: none;
}

.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

// FYI: this iteration of the directive originates from another fiddle where the user will mouseover to show the icons.
//      That fiddle is here: http://jsfiddle.net/robertmazzo/pqomgywt/

// Problem description: Write a directive which will display a list of icons to the right of the list item on the CLICK event.
//                      Each icon will have an ng-click event on it.
//                      Once I click on a different item, the previous icons shown will now be hidden. The new icons will be shown.
//
var app = angular.module('app',
    [
    ]);

app.directive('toggleMe', ['$compile', function ($compile) {
    return {
        restrict: 'AE',
        transclude: true,
        // How do I show these icons when a user clicks on 'Item A' , 'Item B' , or 'Item C' ???
        template: '<span id="myIcons" class="reptIcons" style="display:inline;width:50px;align:right;">' +
                ' <a title="add new folder" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></a>&nbsp;&nbsp;' +
                '<a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a>&nbsp;&nbsp;' +
                '<a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a>&nbsp;&nbsp;' +
                '<a title="rename" onclick="showRename(this);"><i class="fa fa-pencil"></i></a>' +
              '</span>',
        link: function (scope, elem, attrs) {                             
        }
    }
}]).
controller('NavBarCtrl',['$scope', function($scope){
    var nav = this;
    
    nav.items = ['Item A', 'Item B', 'Item C'];
    
    nav.selected = null;
    
    nav.onItemSelect = function(item){
        nav.selected = item;             
    }
    nav.addAfter = function (item) {
        alert('You will now create a new folder to the tree.');
    }
    nav.addBelow = function () {
        alert('You will now create a new report below this folder.');
    }
    nav.remove =...