Angular 1.5 component router $canActivate: accessing next route and rerouting in case of no data

Question

I actually have three issues with $canActivate (also look at code below to better understand the issues):

1. When clicking on <a ng-link="['MachineDetails', { id: 'c6bd76947fc0' }]</a> I cannot access the id from $canActivate (url and route have not chnaged yet so can't get it either through an inject $location or injected $rootRouter)
2. I cannot figure out a way to pass data from $canActivate to the controller.

3. I cannot reroute from $canActivate (by using $rootRouter.navigate()).

   import template from './machine-details.html';
   
   export const machineDetailsComponent = {
       template: template,
       controller: machineDetailsController,
       $canActivate: canActivate,
   };
   
   /*@ngInject*/
   function machineDetailsController (machineDetailsService) {
       this.$routerOnActivate = function (nextRoute) {
           // do something;
       };
   }
   
   /*@ngInject*/
   function canActivate ($q, $rootRouter, machineDetailsService) {
       const deferred = $q.defer();
       /**
        * ISSUE 1:
        * if I get here via ng-link, then $rootRouter.lastNavigationAttempt 
        * shows the route I was on when clicking, however if I type the url manually 
        * (or refresh) I get something I can use which is for example '/machineDetails/c6bd76947fc01'
        **/ 
       const machineId = $rootRouter.lastNavigationAttempt.split('/')[2];
   
       machineDetailsService.getMachineDetailsData(machineId)
           .then(successHandler, errorHandler);
   
       /**        
        * ISSUE 2:
        * 'result' does not make its way into controller so I need to call
        * machineDetailsService.getMachineDetailsData again in controller...
        **/ 
       function successHandler (result) {
           deferred.resolve(); // passing on result has no affect
       }
   
       function errorHandler (error) {
           deferred.resolve(error);
           /** 
            * ISSUE 3: 
            * $rootRouter.navigate doesn't work here (and controller is 
            * never called) so how do I cause system to go back to list view ?
           **/ 
           // $rootRouter.navigate(['ListView']);
       }
   
       return deferred.promise;
   }
   

   The above code is my component definition written in ES6.

Answer 1

1. You can inject $nextInstruction in your $canActivate hook and then you can access your params via $nextInstruction.params.

   function canActivate($nextInstruction, $q, $rootRouter, machineDetailsService) {
     const machineId = $nextInstruction.params.id;
   }
   

2. I ran into the same problem, but couldn't find any solution to pass data from the $canActivate hook into the controller.

3. You can navigate to ListView via $rootRouter.navigate(['/ListView']). Notice the forward slash. That needs to be specified because your ListView is not a child route.