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

we have series of notifications , want make overall item clickable related item. has been implemented using ui-sref , functions correctly. however, within that, there series of nested links go other relevant information. problem @ moment parent ui-sref overrides of these links. i've tried implementing these nested links standard anchor , ui-sref has same effect. hyperlink shows correctly, , when clicking on it, goes split second, reverts ui-sref link.

here 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 post</span>         </div>     </div> </div> 

is related ui-sref or there specific setting in routes fix this?

thanks

just create directive like:

myapp.directive('preventbubbling', function() {     return {         link: function($scope, element) {              element.on("click", function(e) {                  e.stoppropagation();              });         }     }; }); 

and add inner links:

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

basically, when click on nested element, click event bubbles dom tree. stopping propagate.

https://developer.mozilla.org/en/docs/web/api/event/stoppropagation

update

also, if inner links inheriting properties parent ui-sref should use ui-sref-opts well:

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