0

I'm defining a page title in my state object as advised here.

$stateProvider
  .state('project', {
    url: '/projects/:origin/:owner/:name',
    template: '<project></project>',
    data : { pageTitle: 'Project page title'},
  });

so i can access it this way later on:

$state.current.data.pageTitle

Now ... What i'd like to do is that instead of having a fixed value as pageTitle i'd like to access one the stateParams.

BEWARE, below exemple is not working, this is the way i'd like it to work.

$stateProvider
  .state('project', {
    url: '/projects/:origin/:owner/:name',
    template: '<project></project>',
    data : { pageTitle: $stateParams.name},
  });

I could also use the attribute resolve :

resolve: { title: 'Project page title' },

For stateParams value i could do that:

resolve:{
    pageTitle: ['$stateParams', function($stateParams){
      return $stateParams.name;
    }]
}

But then console.log($state.current.resolve.pageTitle); in my controller will return the entire function and not the result.

What would be the proper way to do that?

UPDATE :

The thing which i didn't mention is that i use angularJs with ES6 and i use a modular architecture. Therefore each component has its own scope.

You can check my previous post to have a better idea about the modular architecture i'm using.

I'm building a breadcrumb grabbing the parent states (using the defined pageTitle). Therefore defining the page title name in each module would be perfect.

So i can decide if the page title would be a fixed value "My page title" or a stateParams value.

Maybe this is totally wrong and this should not be done that way. Let me know if it is the case.

Community
  • 1
  • 1
Brieuc
  • 3,994
  • 9
  • 37
  • 70

1 Answers1

1

If you use a resolve like your example:

resolve:{
    pageTitle: ['$stateParams', function($stateParams){
        return $stateParams.name;
    }]
}

You'll need to inject pageTitle into your controller:

angular.module('app').controller('controller', [
             'pageTitle',
    function (pageTitle) {

    }
]);

But i don't see how that is any different from injecting $stateParams:

angular.module('app').controller('controller', [
             '$stateParams',
    function ($stateParams) {

    }
]);
iH8
  • 27,722
  • 4
  • 67
  • 76
  • The thing which i didn't mention is that i use angularJs with ES6 and i use a modular architecture. Therefor each component has its own scope. I'm building a breadcrumb grabing the parent states (using the defined pageTitle). Therefor i would like to avoid having this logic in my breadcrumb component. Defining the page title name in each module would be perfect. – Brieuc Feb 19 '16 at 10:52
  • I get your point and i guess you are right. I checked this other post which seems to be exactly what i need to do. I can't manage to make it work yet with ES6 but at least it is a good hint. http://stackoverflow.com/questions/21970406/how-to-make-automated-dynamic-breadcrumbs-with-angularjs-angular-ui-router – Brieuc Feb 19 '16 at 14:01