Global parameter in ui-router

Question

I'm using ui-router in AngularJS like this:

.state
('browse.category', {
      url: "/:category",
      templateUrl: "views/browseCategory.html",
      controller: function($stateParams, $scope) {
        $scope.params = $stateParams;
      }
    })

How can I make the $stateParams variable global so I can access it in any view / controller?

Right now I can only access the parameters in the nested view.

what do you mean by making it global? what's bad with inject it wherever you need it? — giladk, Nov 10 '15 at 21:36

score 3 · Accepted Answer · answered Nov 11 '15 at 05:29

There is a working example, which uses this notation:

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

And that makes it available anywhere:

<div >
  <h3>current state name: <var>{{$state.current.name}}</var></h3>


  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>

</div>

Check it in action here

score 2 · Answer 2 · answered Nov 10 '15 at 21:36

2

$rootScope - global variable in angular.

answered Nov 10 '15 at 21:36

Alex Kvitchastyi

250
2
11

Global parameter in ui-router

2 Answers2