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

Question

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

它似乎并排运行良好，除了我试图简单地在单击的树节点旁边显示自定义图标(请参见下面的示例图片)。

所以我的指令是 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");
              });              
          }
      }
    })

在这一点上我最大的问题是让图标出现在点击的树节点上。然后，一旦用户单击不同的节点，图标将仅在新单击的节点上再次呈现。

这个 fiddle 代表了一个部分工作的例子，但图标出现在每个树节点上 - click tree item to show icons

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

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; 时显示节点

此外，您应该使用 ng-click 指令，而不是以这种方式监听点击事件。一切都可以通过指令来实现。当您更好地了解您的问题时，我可以提供更多信息:我怀疑您没有以正确的方式解决问题。

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

http://jsfiddle.net/kau9jnoe/