CODEWITHSUNDEEP
angularjsangular-ui-router
Winnemucca
Winnemucca

Reputation: 3458

creating a route Param using ui-router

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

Upvotes: 0

Views: 110

Answers (1)

Anid Monsur
Anid Monsur

Reputation: 4538

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>

Upvotes: 1

Related Questions