AngularJS 指令中的父/子点击关系 [英] Parent/child click relationships in AngularJS directives

问题描述

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

当用户点击该树节点时，这里的指令代码会在树节点旁边插入一些自定义图标:

 .directive('toggleMe', function ($compile) {//剑道树视图，使用k-template指令嵌入span.//图标出现在 Click 事件上.返回 {限制:'AE'，转置:真实，模板:'<span ng-show="nav.displayIcons" id="myIcons" class="reptIcons" style="display:none;width:50px;align:right;">'+' <a title="添加新文件夹" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></>&nbsp;&nbsp;'+'<a title="在此处添加报告" 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>',链接:函数(范围，元素，属性){var icons = elem.find("#myIcons");elem.on('点击', 函数 (e) {$('.reptIcons').css('display', 'none');图标.css(显示"，内联")；icons.css("margin-left", "5px");});}}})

此时我最大的问题是让图标出现在被点击的树节点上.然后，一旦用户点击不同的节点，图标只会在新点击的节点上再次呈现.

这个小提琴代表一个部分工作的例子，但图标出现在每个树节点上 -

I have a custom directive placed on a Kendo UI treeview widget.

It seems to be working fine side-by-side, except that I'm trying to simply display the custom icons next to the tree node which is clicked on (see sample image below).

So my directive is data-toggle-me, placed next to the Kendo k-template directive as follows :

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

and the directive code here inserts some custom icons next to the tree node when a user clicks on that tree node :

 .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");
              });              
          }
      }
    })

My biggest problem at this point is getting the icons to appear on the treenode which is clicked on. Then once the user clicks on a different node, the icons will only render again on the newly-clicked node.

This fiddle represents a partially-working example but the icons are appearing on every single treenode - click tree item to show icons

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

解决方案

I'm not sure to understand your issue, you should try to reduce the code to the minimum and have a snippet/jsfiddle that works.

If all you want is not trigger click events when $scope.disableParentClick is set to true, simply add

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

Now that seems all not very angular friendly to me. You should externalize your HTML in either the template or templateUrl of your directive, potentially adding to it a ng-if="displayTemplate" which would only display the node when a click would set $scope.displayTemplate = true;

Also, instead of listening for click events this way, you should use the ng-click directive. Everything is doable with directives. I can give more information when you better understand your problem: I suspect you are not approaching it the right way.

UPDATE: if all you want is display the icons list of the clicked element, you could do it way easier. You actually don't need the toggle-me directive, but even if you keep it you can solve all your troubles the angular-way, which is by using ng-click, ng-repeat, etc. Please have a look at the following jsFiffle to see one way of doing that. There are many other ways, but really try using ng-click to avoid troubles:

http://jsfiddle.net/kau9jnoe/

这篇关于AngularJS 指令中的父/子点击关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！