Simple way to display $state data using ui-router

Question

I've seen all the other answers for similar questions but I think this is different.

I have a state defined as such:

  .state('2col.flight-log', {
    url: 'flight-log',
    templateUrl: 'components/2col-pages/flight-log/flight-log.html',
    data : { pageTitle: 'Flight Log' }
  })

Within flight-log.html I'd like to do something like {{$state.current.data.pageTitle}} or {{$state.data.pageTitle}}. However, this doesn't work. Am I doing something wrong?

I understand the state change issue inherent with this approach but this is fine for now. If I have to create a directive I will, but it really seems like overkill. Should the way I've outlined work?

I don't seem to understand the question. What isn't clean? Are you able to create a fiddle commenting the bit you think is convoluted? — Matt Way, Dec 13 '14 at 01:09
After digging a bit deeper I realized that I need to have a .run block if I want to do it this way. That answer is found near the bottom in a previous question http://stackoverflow.com/questions/23813599/set-page-title-using-ui-router What is the proper protocol here? Do I delete my question since it's a duplicate? — Lee, Dec 13 '14 at 02:52
@Lee While writing the reply you made the comment and i didn't see. — rnrneverdies, Dec 13 '14 at 03:10

score 1 · Accepted Answer · answered Dec 13 '14 at 03:56

Here's how I got it working:

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

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

app.state('2col.flight-log', {
    url: 'flight-log',
    templateUrl: 'components/2col-pages/flight-log/flight-log.html',
    data : { pageTitle: 'Flight Log' }
})

and in flight-log.html I put {{$state.current.data.pageTitle}} wherever I needed it.

What's important about this is the app.run block. From the documentation "A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created."

Why do you accept and then unaccept an answer and then plagiarize? Other people worked for help you. Be polite. At least leave a comment. — rnrneverdies, Dec 13 '14 at 04:09

score 0 · Answer 2 · answered Dec 13 '14 at 03:04

This is how I do it:

Set at $rootScope a ref to $state in app.run

var app = angular.module('app', ['ui.router']);

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


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

    $urlRouterProvider
      .otherwise('/');

    $stateProvider
      .state("home", {
        url: "/",
        template: 'HELLO WORLD',
        data: {
          myData: "Working!"
        }
      });

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.ui-router/0.2.10/angular-ui-router.js"></script>

<pre ng-app="app" id="uiRouterInfo">
      $state = {{$state.current.name}}
      $stateParams = {{$stateParams}}
      $state full url = {{ $state.$current.url.source }}
      $state my data = {{ $state.$current.data.myData }}
</pre>

Simple way to display $state data using ui-router

2 Answers2