AngularJS: ui-router: Do not output link of current state?

Question

Is it possible to check state in the view and don't output the link for current (active) state?

Currently trying:

<a ng-if="!$state.includes('dashboard.common')" ui-sref="dashboard.common" >Dashboard</a>
<span ng-if="$state.includes('dashboard.common')">Dashboard</span>

Of course, I could decorate it with ui-sref-active, but I don't want to have link at all.

Any ideas?

Did you expose $state on the scope - i.e. $scope.$state = $state? — New Dev
– New Dev, Commented Jul 27, 2015 at 13:59
Create a custom directive similar to ui-sref-active that applies the equivalent of ng-if - ui.router doesn't have such directive built-in — New Dev
– New Dev, Commented Jul 27, 2015 at 14:34

Community · Accepted Answer · 2017-05-23 11:45:54Z

0

the answer was provided here

and my final version is:

angular.module('ui')
  .directive('uiLink', function($state) {
    'use strict';

    return {
      restrict: 'E',
      transclude: true,
      template: [
        '<a ui-sref="{{uiSref}}" ng-if="!isCurrent()" ng-transclude></a>',
        '<span ng-if="isCurrent()" ng-transclude></span>'
      ].join(''),
      link: function(scope, element, attrs) {
        scope.uiSref = attrs.sref;
        scope.isCurrent = function() {
          return $state.includes(attrs.sref);
        };
      }
    };
  });

so now you can use this directive like:

<ui-link sref="dashboard.common"><span translate="MY_DASHBOARD">Dashboard</span></ui-link>

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Jul 30, 2015 at 8:26

Stepan Suvorov

26.3k27 gold badges117 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: ui-router: Do not output link of current state?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related