Question

25

How to achieve that ui-sref be conditionally executed?

rated 0 times [ 29] [ 4] / answers: 1 / hits: 53082 / 10 Years ago, mon, september 1, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalynn

Add To Favorites

Follow

Total Points: 309

Total Questions: 105

Total Answers: 90

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

answered 10 Years ago madelyn · Accepted Answer

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