Resolving data on ui-router and angular material

174 views Asked by At

I have an app that has a toolbar as in Angular Material suggests. This toolbar has only, for now, a title.

<md-toolbar>
    <div class="md-toolbar-tools">
        <h2>
            <span>{{pageTitle}}</span>
        </h2>
    </div>
</md-toolbar>

And I have the following structure on my ui-router state configuration:

$stateProvider
        .state('app', {
            url: '/',
            views: {
                'nav': {
                    templateUrl: baseUrl + 'home/views/partials/ufa-toolbar.html',
                    controller: 'navController'
                },
                'content': {
                    templateUrl: baseUrl + 'home/views/partials/ufa-content.html',
                    controller: 'ufaController'
                }
            },
            resolve: {
                title: function() {
                    return 'Home'
                }
            }
        })
.state('app.accounts', {
            abstract: true,
            url: 'accounts/',
            controller: 'accountsController'
        })
        .state('app.accounts.login', {
            url: 'login',
            views: {
                'content@': {
                    templateUrl: baseUrl + 'accounts/views/partials/ufa-login-content.html',
                    controller: 'loginController'
                }
            },
            resolve: {
                title: function() {
                    return 'Login'
                }
            }
        })

What I want to do is resolve in every child state, the page title. But it seems that the navController is loaded once and only. If I navigate through states it won't load again and resolve the title as I want to do.

I think it would be possible to use in every child state a view nav@ referecing to the parent view with its custom html. But for now, the effort of creating html templates to just change the name doesn't look efficient for me.

The navController looks like this:

.controller('navController', ['$scope', '$state', 'title', function ($scope, $state, title)
{
    $scope.pageTitle = title;
}])

The bottle line: is it possible to resolve a title attribute while changing child states that does not contain its own custom view but it is under a parent state.

0

There are 0 answers