passing parameters in nested views with ui-router

Question

I am running into trouble understanding how you can correctly pass parameters using AngularJS.

This is the code I was trying to use in my app.js file for the nested views, however, the nest state never properly renders.

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('news', {
    url: '/news',
    templateUrl: 'templates/news.html',
    controller: 'NewsCtrl'
  })

  .state('news.id', {
    url: '/news/:id',
    templateUrl: 'templates/news.id.html',
    controller: 'NewsCtrl'
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/news');
})

It will try and change the url to #/news/news/:id versus just #/news/:id.

And if I try and change the path to just be the #/news/:id, then the pages do not render correctly.

What is the best approach to achieve these nested views with parameters?

news.html is the layout or listing page?

Palsri
– Palsri

2018-07-10 02:45:02 +00:00
Commented Jul 10, 2018 at 2:45 — Palsri
– Palsri, Commented Jul 10, 2018 at 2:45

lastr2d2 · Accepted Answer · 2018-07-10 02:49:20Z

2

According to ui-route wiki:

When using url routing together with nested states the default behavior is for child states to append their url to the urls of each of its parent states.

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

So in your case, you should try

 .state('news.id', {
    url: '^/news/:id',
    templateUrl: 'templates/news.id.html',
    controller: 'NewsCtrl'
  });

answered Jul 10, 2018 at 2:49

lastr2d2

4,0143 gold badges27 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

passing parameters in nested views with ui-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related