CODEWITHSUNDEEP
angularjsangular-ui-router
Sagar
Sagar

Reputation: 710

How to dynamically set ui-sref value to parent state of the current state

1) My html form/view has below anchor tag which takes me to a state after clicking it

           <a class="btn btn-default" ui-sref="custom.email.send">

2) But the same form is called from 2 different routes

3) Hence I want to set value of ui-sref dynamically to point to parent state of the state from where it was called!

For ex , if the above form is called from state "custom.email.send" then ui-sref should point to "custom.email"

Upvotes: 0

Views: 521

Answers (2)

Hitmands
Hitmands

Reputation: 14179

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

$rootScope.linkHistoryBack = '/';
$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
  $rootScope.linkHistoryBack = $state.href(from, fromParams, {
    absolute: true
  });
});
<a ng-href="{{$root.linkHistoryBack}}">Go Back</a>

or, alternatively, build a directive:

angular
  .module('uiSrefUtils', ['ui.router'])
  .directive('uiSrefBack', function uiSrefBackDirectiveFactory($state) {
    
    return function(iScope, iElement, iAttributes) {
      
      iElement.attr('href', '/');
      
      $rootScope.$on('$stateChangeSuccess', function(e, to, toP, from, fromP) {
        var link = $state.href(from, fromP, {
          absolute: true
        });
        
        return iElement.attr('href', link);
      });
      
    };
  })
;

// use in your app
angular.module('myApp', ['ui.router', 'uiSrefUtils']);
<a ui-sref-back>Return</a>

Upvotes: 1

stackdisplay
stackdisplay

Reputation: 2045

You may create a state change listener to listen for state change globally

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
        $rootScope.previousState = from;
    });

You may then access the previous state name with $rootScope.previousState.name and use this as the binding value

Upvotes: 0

Related Questions