我对uiSref指令有一个有趣的问题,我无法在网络上的任何地方找到解决方案(无论如何都是优雅的解决方案).基本上,我要求客户端能够单击资源表中的行并转到该资源的编辑视图.通常,uiSref指令工作得很漂亮,但问题在于我在最后一个< td>中有一个Bootstrap下拉列表.表中包含一堆快速操作.
HTML看起来像这样：
<table class="table table-bordedered table-hover">
<thead>
<tr>
<td>Name</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="resource in resources" ui-sref="edit({id: resource.id})">
<td ng-bind="resource.name"></td>
<td class="actions-column">
<div class="btn btn-xs btn-default" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</div>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:void(0)" ng-click="doSomethingCrazy(resource)">SOMETHING CRAZY</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
问题是,当我单击actions列中的按钮时,uiSref会覆盖下拉列表的默认操作,并将我带到编辑页面.现在你可能会问自己“这很容易,为什么你不能阻止事件的传播！？”……不起作用.当我将其添加到actions列时：
<td class="actions-column" ng-click="$event.stopPropagation()">
它会杀死下拉菜单的功能,但不显示任何内容.现在我有一个解决方法,我在< tr>上定义了ngClick.然后根据点击的元素解密状态应该去的元素,如下所示：
<tr ng-repeat="resource in resources" ng-click="goToEdit(resource,$event)">
JS看起来像这样：
scope.goToEdit = function(resource,event) {
// if the event.target has parent '.actions-column' or is that column,do nothing else
// invoke $state.go('edit',{id: resource.id})
}
我讨厌它,我有很多像这样的列表视图.所有我正在寻找的是一个优雅和可移植的解决方案,希望通过UI路由器本身工作,如$event.stopPropagation()(虽然我已经戳穿了UI路由器源,似乎找不到一个可行的替代方案).基本上我想吃蛋糕也吃.无论如何,看到SO社区可以提出什么,或者我要求的东西目前是不可能的,这将是有趣的.谢谢！
我知道了！在查看UI路由器源代码时,如果在uiSref所在的元素上填充了目标属性,则会忽略click事件.它可能不是世界上最美丽的东西,但它肯定比我以前做的更容易.
原文链接：/angularjs/240575.html注意：这仅适用于您使用整个jQuery库,而不是jQLite
所以我写了这个指令：
app.directive('uiSrefIgnore',function() {
return {
restrict: 'A',link: function(scope,elem,attrs) {
elem.on('click',function(e) {
// Find the ui sref parent
var uiSref = elem.parents('[ui-sref]').first();
// Set the target attribute so that the click event is ignored
uiSref.attr({
target: 'true'
});
// Function to remove the target attribute pushed to the bottom
// of the event loop. This allows for a digest cycle to be run
// and the uiSref element will be evaluated while the attribute
// is populated
setTimeout(function() {
uiSref.attr({
target: null
});
},0);
});
}
};
});
这样,每当我想忽略uiSref指令的javascript事件时,我只需将其添加到html：
<tr ui-sref="edit"> <!-- any other elements --> <td ui-sref-ignore>The element I care about</td> </tr>
繁荣！让我知道你们对这个问题的看法.
