我在 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> ' +
'<a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a> ' +
'<a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a> ' +
'<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
**** 更新树图像 - 所有子节点现在都显示图标(不是我想要的)****
最佳答案
我不确定是否理解您的问题,您应该尝试将代码减少到最少,并有一个有效的代码段/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/
关于angularjs-directive - AngularJS 指令中的父/子点击关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28752567/