javascript - 在 Angular-Kendo Treeview 中，使用类名隐藏/显示跨度元素

Question

我将 Angular-Kendo UI Treeview 小部件与 k-template 指令结合使用，以在每个树节点的右侧显示图标列表。

通过这种方式，我的 jquery .click() 事件应该隐藏/显示我的 reptIcons 范围，但它只在第一个树节点上工作顶部。

它应该在我点击的每个节点上工作，但它正在恢复到我的树中的第一个节点。

这里有一张图片可以准确地表达我的意思:

这是带有 kendo-tree-view 指令和我的自定义 data-toggle-tree-icons 指令的 html:

 <div id="" class="reports-tree" kendo-tree-view="nav.treeview"             
                k-options="nav.treeOptions"
                k-data-source="nav.reportsTreeDataSource"
                k-on-change="nav.onTreeSelect(dataItem)"     >               
    <span class="tree-node" k-template>
        {{dataItem.text}}<data-toggle-tree-icons/>
    </span>

然后是处理点击事件的javascript:

     $('.reports-tree').click(function (e) {            
        $("span[class$='reptIcons'").hide();
        $("#myIcons").closest('span').css("display", "inline");
        $("#myIcons").css("margin-left", "5px");
    });

指令代码为:

 directive('toggleTreeIcons', function ($compile) {
  // on Kendo treeview, using the k-template option to embed tree icons      
  return {
      restrict: 'AE',
      templateUrl: 'app/shared/include/treeicons-include.html'
    }
 });

treeicons-include.html 的内容

  <span id="myIcons" class="reptIcons" style="display: none; width: 50px;">
<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>

理想情况下，我想使用上面的 tree-node 类，当选择树节点时，我会使用 jQuery .click() 来显示myIcons 跨度如上所示。

我在找出连接上面的 .click() 事件的最佳方法时遇到了特别的麻烦。我知道我离解决这个问题很近了。

谢谢!鲍勃

Answer 1

您可以在 k-on-change="nav.onTreeSelect(dataItem)" 中执行此操作。我看不到完整的实现，但最好的猜测是建议您可以这样做，其中 $(this) 理想情况下是选择的 Treeview 节点。

.onTreeSelect = function(dataItem) {
    $('.reports-tree .reptIcons').hide();
    $(this).closest('.reptIcons').css({'display : inline', 'margin-left' : '5px'})
}

编辑

根据讨论中的建议，如果上面的简单方法不够，可以设计一个自定义指令来处理这个问题

.directive('toggleMe', ['$compile', function ($compile) {
    return {
        restrict: 'AE',
        transclude: true,
        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) {                             
        }
    }
}])

---

随着实现

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

---

.controller('NavBarCtrl',['$scope', function($scope) {
    var nav = this;

    nav.items = ['Item A', 'Item B', 'Item C'];

    nav.onItemSelect = function(item) {
        nav.selected = item;  
    }           
}]);

JSFiddle Link