Question

我在Kendo UI树视图小部件上放置了一个自定义指令。

除了我试图简单地显示点击的树节点旁边的自定义图标（参见下面的示例图片）之外，它似乎并排工作得很好。

所以我的指令是data-toggle-me，放在Kendo k-template指令旁边，如下所示：

<div 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 data-toggle-tree-icons>{{dataItem.text}}</span>
  
</div>

当指令代码在树节点上的用户clicks时，在树节点旁边插入一些自定义图标：

 .directive('toggleMe', function ($compile) {
      // Kendo treeview, use the k-template directive to embed a span.
      // Icons appear on Click event. 
      return {
          restrict: 'AE',
          transclude: true,
          template: '<span ng-show="nav.displayIcons" id="myIcons" class="reptIcons" style="display:none;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) {              
              var icons = elem.find("#myIcons");
              elem.on('click', function (e) {                  
                  $('.reptIcons').css('display', 'none');
                  icons.css("display", "inline");
                  icons.css("margin-left", "5px");
              });              
          }
      }
    })

treeview widget with embedded icons

此时我最大的问题是让图标显示在点击的treenode上。然后，一旦用户单击其他节点，图标将仅在新单击的节点上再次呈现。

这个小提琴代表了一个部分工作的例子，但每个treenode上都出现了图标 - click tree item to show icons

****更新的树图像 - 所有子节点现在都显示图标（不是我想要的）****

UPDATED TREE IMAGE - All child nodes now show icons (not what I want)

Answer 1

我不确定您是否理解您的问题，您应该尝试将代码降至最低，并使用一个可用的代码段/ jsfiddle。

如果您想要的只是在$scope.disableParentClick设置为true时触发点击事件，只需添加

即可

elem.on('click', function (e) {
  // Do not execute click event if disabled
  if (!$scope.disableParentClick) { return; }
  ...
});

现在看起来对我来说似乎都不是很友好。您应该在指令的template或templateUrl中外部化HTML，可能会向其添加ng-if="displayTemplate"，这只会在点击设置$scope.displayTemplate = true; <时显示节点/ p>

此外，您应该使用ng-click指令，而不是以这种方式侦听点击事件。指令一切都是可行的。当你更好地理解你的问题时，我可以提供更多信息：我怀疑你没有以正确的方式接近它。

更新：如果你想要的只是显示点击元素的图标列表，你可以更容易地做到这一点。你实际上不需要toggle-me指令，但即使你保留它，你也可以使用ng-click，ng-repeat等来解决角度方式的所有麻烦。请看看下面的jsFiffle来看单向这样做。还有很多其他方法，但真的尝试使用ng-click来避免麻烦：

http://jsfiddle.net/kau9jnoe/

Answer 2

DOM中的事件总是冒出来的。这是对链接的点击会触发层次结构上每个元素的onclick处理程序，例如也是body元素。完成所有点击后，body。

您的指令也是如此。元素中的任何单击都会触发其事件处理程序。要避免这种情况，要么将事件处理程序附加到其他位置，要么忽略来自链接的点击。

事件对象具有target属性，可告诉您启动事件的元素。所以你可以这样做：

elem.on('click', function (e) { 
 if (e.target.nodeName.toLowerCase() == 'a') return; //ignore click on links

AngularJS指令中的父/子点击关系

2 个答案: