How can I dynamically unlink a directive in angularJS? - angularjs

Question

I don't know if there's a way to handle this in angularjs, but I want to be able to dynamically unlink/link a directive.
For example, I have a link which goes to a user's profile page:
<a ui-sref="users({user_id: post.user.id})">{{post.user.username}}</a>: {{post.text}}
Which correctly creates a link: href="/users/5"
But if that post is anonymous, then there's no user id for that post, creating a link: href="/users/", which is not what I want.
The only solution I was able to find was the following:
<span ng-if="post.user.id">
<a ui-sref="users({user_id: post.user.id})">{{post.user.username}}</a>: {{post.text}}
</span>
<span ng-if="!post.user.id">
<a href>{{post.user.username}}</a>: {{post.text}}
</span>
Which wouldn't be so bad if I weren't putting all this nonsense throughout my entire application. Is there a way to create a simple directive that does the following:
<a ui-sref="({user_id: post.user.id})" unlink="{'ui-sref': !post.user.id}">post.user.username</a>: {{post.text}}
And it would link/unlink ui-sref depending on the value of post.user.id? I could try to create a directive that modifies href, but that would be a mess conflicting with ui-sref. Also, an unlink directive would be more extensible because we could effectively use it with any directive. Any ideas?

Answer 1

Here is a plunker: http://plnkr.co/edit/dus2VixdzhUJtakOs4WR?p=preview
I made a directive that adds a 'click' event listener before ui-sref:
If the expression is evaluated to false then stopImmediatePropagation is called.
I use the native addEventListener because of this issue.
Directive:
app.directive('unlink',function($parse){
return {
compile: function (tElm,tAttrs) {
var fn = $parse(tAttrs.unlink);
return {
pre: function (scope,elm){
elm[0].addEventListener('click', function(e){
if(! fn(scope)) {
e.stopImmediatePropagation();
}
});
}
}
}
}
});
HTML:
<a ui-sref="home" unlink="expression"> Click </a>