AngularJs : Attach a stateParams value to custom data in state objects

Question

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.

May be you need to invoke the function? Like console.log($state.current.resolve.pageTitle()); — Naga Sandeep
– Naga Sandeep, Commented Feb 19, 2016 at 10:36

iH8 · Accepted Answer · 2016-02-19 10:35:45Z

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) {

    }
]);

answered Feb 19, 2016 at 10:35

iH8

28.8k4 gold badges72 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brieuc Over a year ago

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 Over a year ago

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. stackoverflow.com/questions/21970406/…

Collectives™ on Stack Overflow

AngularJs : Attach a stateParams value to custom data in state objects

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related