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 指令放在一起的这个例子。我不包括任何剑道控件，但您应该能够将类似的内容添加到您的自定义模板中。你可能需要做一些小的改变，当然你可以让它更健壮，但这似乎是一个很好的情况来使用这样的东西，你可以使用任何你想要的元素<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);
            }
        }
    }
}]);