ui-sref in parent div overriding all nested links - angularjs

Question

We have a series of notifications and want to make the overall item clickable to the related item. This has been implemented using ui-sref and functions correctly. However, within that, there are to be a series of nested links that go to other relevant information. The problem at the moment is this parent ui-sref overrides all of these links. I've tried implementing these nested links as standard anchor and ui-sref but it has the same effect. So the hyperlink shows correctly, and when clicking on it, it goes to it for a split second, then reverts back to the ui-sref link.
Here is a code example:
<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>
Is this related to the ui-sref or is there a specific setting in the routes to fix this?
Thanks

Answer 1

Just create a directive like:
myApp.directive('preventBubbling', function() {
return {
link: function($scope, element) {
element.on("click", function(e) {
e.stopPropagation();
});
}
};
});
And add it to your inner links:
<a ui-sref="user.posts({username: username})" prevent-bubbling></a>
Basically, when you click on a nested element, the click event bubbles up to the DOM tree. So we are simply stopping it to propagate.
https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
Update
Also, if your inner links are inheriting properties from parent ui-sref then you should use ui-sref-opts as well:
<a ui-sref="user.posts({username: username})" ui-sref-opts="{inherit: false}" prevent-bubbling></a>