在AngularJS指令父/子关系点击 [英] Parent/child click relationships in AngularJS directives
问题描述
我有放置在剑道UI控件树视图自定义指令。
这似乎是工作的罚款并排侧，但我想简单地显示自定义图标旁边，这是点击（见下面的示例图像）。
树节点所以我的指令是数据切换，我，放在旁边的剑道 K-模板指令如下
＆LT; DIV CLASS =报告树剑道树视图= nav.treeview\r
K-选项=nav.treeOptions\r
K-数据源=nav.reportsTreeDataSource\r
K-ON-变化=nav.onTreeSelect（DataItem的）＆GT;\r
\r
＆LT;跨度类=树节点K-模板数据肘树图标＆GT; {{dataItem.text}}＆LT; / SPAN＆GT;\r
\r
＆LT; / DIV＆GT; \r
和指令$ C $其中，C插入旁边的树节点的一些自定义图标，当用户点击该树节点上：
.directive（'toggleMe'，函数（$编译）{\r
//剑道树视图，使用K-模板指令嵌入一个跨度。\r
//图标出现在Click事件。\r
返回{\r
限制：AE，\r
transclude：真实，\r
模板：'＆LT;跨度NG秀=nav.displayIconsID =myIcons级=reptIcons的风格=显示：无;宽度：50像素;对齐：权利;＆GT;' +\r
'＆LT;标题=添加新文件夹NG点击=nav.addAfter（nav.selectedItem）＆GT;＆LT; I类=发发文件夹打开＆GT;＆LT; / I＆GT;＆LT; / A＆GT;＆安培; NBSP;＆安培; NBSP; +\r
'＆LT;标题=这里补充报告NG点击=nav.addBelow（nav.selectedItem）＆GT;＆LT; I类=发发加＆GT;＆LT; I＆GT /;＆LT; / A＆GT; ＆安培; NBSP;＆安培; NBSP; +\r
'＆LT;标题=删除NG点击=nav.remove（nav.selectedItem）＆GT;＆LT; I类=发发 - 删除＆GT;＆LT; / I＆GT;＆LT; / A＆GT;＆安培; NBSP;＆安培; NBSP; +\r
'＆LT;标题=重命名的onclick =showRename（本）;＆GT;＆LT; I类=发发铅笔＆GT;＆LT; / I＆GT;＆LT; / A＆GT;' +\r
'＆所述; /跨度＆GT;'，\r
链接：功能（范围，ELEM，ATTRS）{\r
变种图标= elem.find（＃myIcons）;\r
elem.on（'点击'，功能（E）{\r
$（'。reptIcons'）的CSS（'显示器'，'无'）;\r
icons.css（显示，内联）;\r
icons.css（利润率左，5像素）;\r
}）;\r
}\r
}\r
}） \r
在这一点上我最大的问题越来越图标出现在其上点击的树节点。然后，一旦用户点击不同的节点上，图标只会再次新近点击的节点上渲染。
这拨弄重新presents部分工作的例子，但图标会出现在每一个树节点 - 点击树项显示的图标
****已更新树形象 - 所有的子节点现在显示的图标（不是我想要的）****
我不知道理解你的问题，你应该尽量减少code到最小，有一个片断/的jsfiddle的作品。
如果你想在 $ scope.disableParentClick 设置为true，则不会触发click事件，只需添加
elem.on（'点击'，功能（E）{
//不执行click事件如果禁用
如果（！$ scope.disableParentClick）{返回; }
...
}）;
现在，似乎所有不是很友好的角度给我。你应该外部化你的HTML无论是在模板或 templateUrl 您的指令，可能需要添加到它的 NG-IF =displayTemplate这将只显示节点时点击会设置 $ scope.displayTemplate = TRUE;
此外，而不是监听单击事件这样，你应该使用 NG-点击指令。一切都是可行与指令。我可以给出更多的信息，当您更好地了解你的问题。我怀疑你是不是快到了正确的方式。
更新：如果你想要的是显示单击元素的图标列表，你可以做到这一点比较容易的方式。实际上，你并不需要在切换-我指令，但即使你把它你可以解决所有的烦恼角路，这是通过使用 NG-点击， NG-重复等，请通过以下jsFiffle看看，看的单向这样做的。还有很多其他的方法，但真正尝试使用NG-点击，以避免麻烦：
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> ' +
'<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");
});
}
}
})
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:
这篇关于在AngularJS指令父/子关系点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
