Angular-Kendo TreeView - 使用 div 和 span 模板

Question

在 Angular-Kendo 树视图 <div> 中，我在设置要在悬停事件中显示的 <div> 元素的样式时遇到了一些问题。

这是树视图的图像，每个节点右侧没有图标选项：

但是我想在我将鼠标悬停在节点上时向右显示一些图标，如下所示：

感谢您的建议...

这里是 HTML（请注意这里使用的 Kendo k-template 指令）：

   <div id="treeview" kendo-tree-view             
                k-options="nav.treeOptions"
                k-data-source="nav.reportsTreeDataSource"
                k-on-change="nav.onTreeSelect(dataItem)">



 <span k-template>{{dataItem.text}}
             <span class="templ-icons">               
                <a title="add new folder" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></a>&nbsp;
                <a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a>&nbsp;
                <a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a> 
             </span>
        </span>

</div>

当然，我只想在用户将鼠标悬停在任何特定节点上时显示图标选项（即可以在文件夹级别或叶级别）。

和 CSS :

<style scoped>
.templ-icons {
    text-align: center;
    font-size:smaller;
    font-style: italic;
    color: white;  
}

#treeview:hover > .templ-icons {
    opacity:1.0;
    display:none;
}

Answer 1

如果你为此做一个小指令呢？查看我与 toggle-preview 指令放在一起的这个示例。我没有包括任何 kendo 控件，但您应该能够将类似的内容添加到您的自定义模板中。你可能需要做一些小的改变，你当然可以让它更健壮，但这似乎是使用这样的东西的好情况，你可以使用你想要的任何元素 <span> <div>等

JSFiddle Link

<span toggle-preview>item a</span>

.active::after { 
    content: url(~/icon.gif);
}

app.directive('togglePreview', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.on('mouseenter', function() {
                elem.addClass('active');
            });
            elem.on('mouseleave', function() {
                elem.removeClass('active');
            });
        }
    }
}]);

编辑

根据讨论，我们希望附加所有三个预定义图标，并将 ng-click 处理程序附加到图标，以某种方式知道我们单击了哪个图标。这是一个基于命名约定并根据我们在父 attr

中提供的图标值使用 $compile 服务进行指令注入的解决方案

Updated JSFiddle

<div toggle-preview ico="plus delete folder" >item a</div>

.add::after {
    content: url(~/iconA.gif);
}

.delete::after { 
    content: url(~/iconB.gif);
}

.folder::after { 
    content: url(~/iconC.gif);
}

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="//~' + 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);
            }
        }
    }
}]);

Angular-Kendo TreeView - 使用 div 和 span 模板

Angular-Kendo TreeView - working with div and span templates

html

javascript

css

kendo-ui

angularjs

JSFiddle Link

编辑

Updated JSFiddle