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

Asked
Active3 hr before
Viewed126 times

8 Answers

achieveconditionally
90%

I want to validate certain condition before the browser follow the link dynamically created by ui-router. ,<a ui-sref="{{condition ? '.childState' : '.'}}"> Conditional Link </a>,Based on the answers to How to dynamically set the value of ui-sref you can create a function in your scope for building the URL:, GitLab launches Collective on Stack Overflow

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>
load more v
88%

I want to validate certain condition before the browser follow the link dynamically created by ui-router. ,Based on the answers to How to dynamically set the value of ui-sref you can create a function in your scope for building the URL:,The condition should be evaluated inside a $scope function and on on-click event (before-transition with the ability to cancel it),href attribute will be created only when the function returns an existing state string.

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>
load more v
72%

A nice directive eatClickIf has been proposed on: http://stackoverflow.com/questions/25600071/how-to-achieve-that-ui-sref-be-conditionally-executed,Another possible approach could be a parameter that disables the link when a condition is true like ui-sref-disabled :,Alternatively the expression could still be put on the ui-sref attribute and the existence of the ui-sref-con next to it would tell it to evaluate it as an expression.,Closing this issue since a couple of options have been proposed in the discussion.

<span ui-sref="app.somestate" ui-sref-if="!editing"> Link to some state </span>
load more v
65%

Next story How to achieve that “ui-sref” be conditionally executed?,I want to validate certain condition before the browser follow the link dynamically created by ui-router. ,The condition should be evaluated inside a

on('scope
load more v
75%

Using an empty url means that this child state will become active when its parent's url is navigated to. ,add url: "" in test.sub state Using an empty url means that this child state will become active when its parent's url is navigated to. ,An abstract state will never be directly activated, but can provide inherited properties to its common children states.,I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.

I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.

$stateProvider
   .state('home', {
      views: {
         'home': {
            templateUrl: 'home.html',
            controller: controller
         },
         'nav': {
            templateUrl: 'nav.html',
            controller: controller
         },
         'footer': {
            templateUrl: 'footer.html',
            controller: controller
         },
      }
   })
load more v
40%

While your requests are being executed in the same state.,You must do this by passing state arguments.,Just specify the query parameter names in the status url,Is there a way to use the ui-sref attribute only to change request parameters without reloading the page or switching to another function?

I have the following link.

<a ui-sref="...">Clicking this adds ?test=true to the query params.</a>
load more v
22%

et ensuite l'ajouter conditionnellement au lien avec ng-href , pas besoin de directives compliquées ou de piratages. Les travaux suivants très bien et permet une manipulation spécifique sur le clic de non - sref articles: , j'ai besoin de quelque chose comme ceci: , <a ui-sref="{{condition ? '.childState' : '.'}}"> Conditional Link </a>

j'ai besoin de quelque chose comme ceci:

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

Solution possible pour ceux qui ont encore besoin de ng-click travailler sur le composant ui-sref ou ses parents.,La condition doit être évaluée dans un $scope function et sur on-click event (avant-transition avec la possibilité de l'annuler),Comment se rendre à State param avec le service $ transitions? (nouveau routeur ui),N'oubliez pas que ui-sref est lié à ui-sref-active (fonctionne ensemble), je ne peux donc pas supprimer ui-sref et, par exemple, utiliser $state.$go('some-state') dans une fonction appelée avec ng-click.

J'ai besoin de quelque chose comme ça:

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

J'ai essayé:

<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>

Et

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

Même

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

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