Ui-grid with ui-router passing params

Question

I am a beginner (idiot alert)

I am successfully using ui-grid except when they click on an icon in a row it's meant to take them to a new view... The view I'm in showing the ui-grid has a url of

  #/reports/tickets

I have $stateProvider set as follows:

 .state('reports.tickets.details', {
        url: '/details/:ticketNum',
        templateUrl: 'partials/ticketDetail.html',
        controller: 'ticketDetailController'
    })

The data is displayed in ui-grid and a function is called when they click on the icon on the row in the grid. The log looks great, the url displays as I'd expect.

$scope.ticketDetailView = function(row) {
      $log.info(row);
      $state.go('reports.tickets.details', {ticketNum: row.TicketNum});
};

In my debugging the url is changing to

#/reports/tickets/details/7875452697 

Exactly as expected.

So what's wrong with my initial state routing because it's not displaying the templateUrl or engaging the controller. I know this is a stupid beginners error. I've not ever worked with params in the past.

Answer 1

Make sure that reports.tickets state template should have ui-view in it. So that the child state will get loaded inside that ui-view