CODEWITHSUNDEEP
angularjsangular-ui-router
developer033
developer033

Reputation: 24894

Passing the whole object with ui-router

First of all, I'm using ui-router.

Actually I'm passing the slug through the states and it's working perfectly, as you can see below:

.state('pages', {
    url: '/:slug',
    template: '<page-content></page-content>'
})

<a ui-sref="pages({ slug: item.slug })" title="{{item.title}}" ng-repeat="item in $ctrl.menu_items">{{ item.title }}</a>

This way I can get the slug in $stateParams and in URL. However, I want to send the whole object and keep the URL with the slug.

Below you can see my attempt:

The config of states:

.state('pages', {
    url: 'obj.slug', // -> What should I put here? (of course /:slug doesn't work anymore)
    template: '<page-content></page-content>',
    params: { obj: null }
})

HTML:

<a ui-sref="pages({ obj: item })" title="{{item.title}}" ng-repeat="item in $ctrl.menu_items">{{ item.title }}</a>

It's working to passing the whole object through the states (I can get it using $stateParams), however I can't generate the URL dynamically.

An example of the object:

{
  id: 6480,
  title: "Test",
  slug: "test"
}

So, the question is:

Is there a way to generate a url from a property of the object using params (in that way that I'm doing)? Ex: 'site.com/test'? (test is the slug that I want to put in the URL)

Upvotes: 1

Views: 119

Answers (1)

dwbartz
dwbartz

Reputation: 886

You can't change the URL definition once they're loaded. You'll want to do something like

.state('pages', {
    url: '/pages/:slug', // -> What should I put here?
    template: '<page-content></page-content>',
    params: { obj: null }
})

Then use the "slug" part to figure out where to go from there, likely from the resolve property which will allow you to inject objects into your controller.

Edit:

Maybe this is more what you're looking for.

.state('pages', {
        url: '/:pageName' 
        template: '<page-content></page-content>',
        params: { obj: null }
    })

then you change state

$state.go('pages', {pageName: item.Name, obj: item});

I'm not sure how you'd necessarily go about doing that with ui-sref on an anchor tag. Maybe this?

<a ui-sref="pages({pageName: item.Name, obj: item})"

Upvotes: 1

Related Questions