creating a route Param using ui-router

Question

I am not able set up and maintain an route param. When I set the param. It goes to the correct place. However, if I change the route the content does not change. I tried to make one view object, but home.name state does not render with this approach. I can only get templates to show using two absolute paths.

Could not resolve '#/home/Adam Harvey' from state 'home'

I found a great link https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

To start: I created a simple list with ng-repeat. Here is a shortened example

$scope.iterants =  
   [
       {
        name: 'Adam Harvey',
        type: 'Hotel',
        dates: '01/21/2015-01/22/2015',
        location: 'Rockville Maryland',
        status: 'Confirmed'
        },
        {
        name: 'Jana Harvey',
        type: 'Hotel',
        dates: '01/21/2015-01/22/2015',
        location: 'Rockville Maryland',
        status: 'Confirmed'
        }
    ];

In my html template I want to place a ui-sref on top of each person's name as a link to view them on another template.

          <td><a ui-sref="itinerary.name{{name:person.details}}">{{person.name}}</a></td>

In my config I set up like so with the controller getting passed the $stateParams

  .config(function config( $stateProvider ) {
  $stateProvider.state( 'home.name', {
    url: '/home/:name',
    views: {
      "main": {
        controller: 'AboutCtrl',
        templateUrl: 'src/app/about/about.tpl.html'
      }
    },
      data: {pageTitle:'About'}
  });
})

.controller( 'AboutCtrl', function AboutCtrl( $scope, $stateParams ) {
  $stateParams.name;
});

In the home controller. I have set up my config and controller like so...

.config(function config( $stateProvider ) {
  $stateProvider.state( 'home', {
    url: '/home',
    views: {
      "main@": {
        controller: 'HomeCtrl',
        templateUrl: 'src/app/home/home.tpl.html'
      },
        resolve: [{
            name: ['$stateParams', function($stateParams){
                return $stateParams.name;
            }]
        }]
    },
    data:{ pageTitle: 'Home' }
  });
})

Updates

Shouldn't name be resolved in home.name instead of home? Also, I believe resolve takes an object, not an array. — Anid Monsur
– Anid Monsur, Commented Aug 26, 2015 at 21:59

Anid Monsur · Accepted Answer · 2015-08-26 21:57:41Z

1

The issue is your usage of the ui-sref directive. You have to pass the state name and then parameters as an object, like so:

<td><a ui-sref="home.name({ name: person.name })">{{person.name}}</a></td>

answered Aug 26, 2015 at 21:57

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

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

4 Comments

Winnemucca Over a year ago

Huge thanks. I just read that over again on the docs. However, how do you access the template? I am getting the params change. I did put in a resolve on the child but it is not sending me to home.name's templateUrl.

Anid Monsur Over a year ago

Hard to say without seeing the rest of your code. Your home.name state is putting it's view inside of a ui-view named main within the home view. My guess is that you meant to reference main in the root template, so that "main" should actually be "main@". github.com/angular-ui/ui-router/wiki/…

Winnemucca Over a year ago

Got a better sense of what you are saying. Added <div ui-view="main"></div> created the absolute path on the home route. This gives me access. However, I need to use two absolute paths to make this work. Tried to remove the views object on the home.name, but that created an error.

Anid Monsur Over a year ago

A new question might help make things clearer. I'd be happy to help.

Collectives™ on Stack Overflow

creating a route Param using ui-router

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related