$state.current different values when $state injected in onEnter()

Question

This is my code:

angular.module("LearnRouter", ["ui.router"])

.config(['$stateProvider',
  function(stateProvider) {

    stateProvider.state('state1', {
      controller: function($scope, $state) {
        $scope.state3 = function() {
          $state.go('state3');
        }
      },
      template: "<h1><i>Template1</i><div ui-view><button type='button' ng-click=state3()>State 3</button></div></h1>",
      availableOptions:["option1","option2","option3"]
    });

    stateProvider.state('state2', {
      template: "<h1>Template2</h1>"
    });

    stateProvider.state('state3', {
      parent: "state1",
      template: "<h1>Template3<div>Names: <span ng-bind=names></span</div></h1>",
      controller: function($scope, $state) {
        $scope.names=$state.current.availableOptions;
      },
      onEnter:function($state){
        console.log($state)
      }
    });
  }
])


.service('namesRepo', function() {

  this.fetch = function() {
    return ['name1', 'name2', 'name3'];
  }

})

.controller("IndexController", ["$scope", "$state",
  function($scope, $state) {

    $scope.state1 = function() {
      $state.go('state1');
    }

    $scope.state2 = function() {
      $state.go('state2');
    }
  }
]);

It's simple javascript representing usage of angular-ui-router.

I wanted to test whether the child state inherits custom fields from the parent state. Obviously i came to the conclusion it doesn't or at least my results are showing this.

As seen from the code I pass $state to the onEnter function. Since the state is entered (or at least this is how i understand the things), current state must be state3. Even the console.log approve that understanding

This is the result from the console.log($state)

So when i try to console.log($state.current) the result is something different. It gives me that the parent state is the current one.

This is the result from the console.log($state.current)

States do not inherit arbitrary attributes. However, the data attribute of a state declaration is prototypally inherited. See the docs for $stateProvider.state, specifically the 'data' attribute — Chris T

Chris T Chris T · Accepted Answer · 2014-12-15T21:04:58

onEnter and onExit callbacks are invoked while the transition is still in process. $state.current is not updated until the transition is fully complete. Once the transition is complete, $state.current is set to the "to" state, $stateChangeSuccess is called, and the controllers are invoked.

As such, $state.current contains the "from" state during onEnter and onExit.

$state.current different values when $state injected in onEnter()

1 Answers