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鏈接

<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服務用於指令注入的解決方案

更新了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);
            }
        }
    }
}]);