Simple way to display $state data using ui-router - angularjs

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?

Answer 1

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."

Answer 2

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>