Question

我们有一系列通知，并希望整个项目可以点击相关项目。这已使用ui-sref实现并正常运行。但是，在此范围内，还有一系列嵌套链接可用于其他相关信息。目前的问题是这个父ui-sref会覆盖所有这些链接。我已经尝试将这些嵌套链接作为标准锚点和ui-sref实现，但它具有相同的效果。因此超链接显示正确，当点击它时，它会暂时转到它，然后恢复为ui-sref链接。

这是一个代码示例：

<div class="NotificationItemBalanced">
    <div class="notificationItem" ui-sref="community.act({slug: slug, id: id})">
        <div class="messageBodyWrapper">
            <span class="messageText"><strong><a ui-sref="user.posts({username: username})"></a></strong> commented on your post</span>
        </div>
    </div>
</div>

这是与ui-sref相关还是路线中有特定设置来修复此问题？

由于

Answer 1

只需创建一个指令：

myApp.directive('preventBubbling', function() {
    return {
        link: function($scope, element) {
             element.on("click", function(e) {
                 e.stopPropagation();
             });
        }
    };
});

并将其添加到您的内部链接：

 <a ui-sref="user.posts({username: username})" prevent-bubbling></a>

基本上，当您单击嵌套元素时，click事件会冒泡到DOM树。所以我们只是阻止它传播。

https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

<强>更新

此外，如果您的内部链接继承了父ui-sref的属性，那么您也应该使用ui-sref-opts：

<a ui-sref="user.posts({username: username})" ui-sref-opts="{inherit: false}" prevent-bubbling></a>

父div中的ui-sref覆盖所有嵌套链接

1 个答案: