How to achieve that "ui-sref" be conditionally executed?

Question

I want to validate certain condition before the browser follow the link dynamically created by ui-router.

I was looking into $rootscope.$on('$stateChangeStart', ..) but I have no access to the controller.$scope from there. I also need to use this in several places in the application and would be cumbersome.

Keep in mind that ui-sref is linked to ui-sref-active (work together), so i can't remove ui-sref and, by say, to use $state.$go('some-state') inside a function called with ng-click.

The condition should be evaluated inside a $scope function and on on-click event (before-transition with the ability to cancel it)

I need something like this:

<li ui-sref-active="active">       <a ui-sref="somestate" ui-sref-if="model.validate()">Go Somestate</a> </li> 

I tried:

<li ui-sref-active="active">       <a ui-sref="somestate" ng-click="$event.preventDefault()">Go Somestate</a> </li>  <li ui-sref-active="active">       <a ui-sref="somestate" ng-click="$event.stopImmediatePropagation()">Go Somestate</a> </li> 

And

<li ui-sref-active="active">     <a ui-sref="somestate">        <span ng-click="$event.stopPropagation();">Go Somestate</span>     </a> </li> 

Even

<li ui-sref-active="active">       <a ui-sref="somestate" onclick="return false;">Go Somestate</a> </li> 

But does not work.

SANDBOX

Answer 1

This answer inspired me to create a directive that allows me to interrupt the chain of events that end up changing state. For convenience and other uses also prevents the execution of ng-click on the same element.

javascript

module.directive('eatClickIf', ['$parse', '$rootScope',   function($parse, $rootScope) {     return {       // this ensure eatClickIf be compiled before ngClick       priority: 100,       restrict: 'A',       compile: function($element, attr) {         var fn = $parse(attr.eatClickIf);         return {           pre: function link(scope, element) {             var eventName = 'click';             element.on(eventName, function(event) {               var callback = function() {                 if (fn(scope, {$event: event})) {                   // prevents ng-click to be executed                   event.stopImmediatePropagation();                   // prevents href                    event.preventDefault();                   return false;                 }               };               if ($rootScope.$$phase) {                 scope.$evalAsync(callback);               } else {                 scope.$apply(callback);               }             });           },           post: function() {}         }       }     }   } ]); 

html

<li ui-sref-active="active">       <a ui-sref="somestate" eat-click-if="!model.isValid()">Go Somestate</a> </li> 

PLUNKER