2013-03-12 17 views
25

ho definito alcuni percorsi:Come ottenere il nome del percorso quando la posizione cambia?

angular.module('myApp', []) 
    .config('$routeProvider', function($routeProvider) { 
    $routeProvider.when('/aaa', { templateUrl: '/111.html' }) 
        .when('/bbb', { templateUrl: '/222.html'}); 
    }); 

e voglio ottenere il nome della rotta quando l'utente cambia il percorso:

angular.module('myApp') 
    .run(['$rootScope', function($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function(scope, current, pre) { 
     // how to get current route name, e.g. /aaa or /bbb 
     console.log('Current route name: ' + ???); 
    } 
    }]); 

Ma non so come ottenerlo. Posso ottenere il templateUrl, ma non il nome della rotta.


UPDATE

Un caso d'uso più complesso:

$routeProvider.when('/users/:id', { templateUrl: '/show_user.html' }) 

Se percorso corrente è:

/users/12345 

dovrebbe corrispondere /users/:id, ma come faccio a sapere che percorso è abbinato e per ottenere il nome del percorso /users/:id?

risposta

61

È possibile inserire il servizio $ location e utilizzare la relativa funzione path().

angular.module('myApp') 
    .run(['$rootScope','$location', '$routeParams', function($rootScope, $location, $routeParams) { 
    $rootScope.$on('$routeChangeSuccess', function(e, current, pre) { 
     console.log('Current route name: ' + $location.path()); 
     // Get all URL parameter 
     console.log($routeParams); 
    }); 
    }]); 

Puoi trovare altri metodi utili $ posizione nel docs

UPDATE

Se si vuole avere una serie di tuoi parametri di percorso attuali, basta iniettare il servizio di $ routeParams come ho fatto sopra.

+0

@Flex, Vedere la mia domanda aggiornato :) – Freewind

+2

FYI: Il primo argomento di un gestore, anche in angolare non è il campo di applicazione, si tratta di un evento . Ho modificato il tuo snippet di codice per riflettere questo. FWIW, 'currentScope' è disponibile sull'oggetto evento. –

+0

ha una sintassi errata e anche dopo la correzione non funziona dicendo: Provider sconosciuto: $ routeParamsProvider <- $ routeParams – Mike

7

Non è necessario iniettare $location e $routeParams.
È possibile utilizzare current.$$route.originalPath

app.run(function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) { 
     console.log(current.$$route.originalPath); 
    }); 
}); 

Questo è sufficiente per percorsi semplici (senza :id, etc.).

Con il caso d'uso più complesso, restituirà /users/:id.
Ma è possibile estrarre il parametro :id da current.params.id e sostituirlo nel percorso completo.

app.run(function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) { 
     var fullRoute = current.$$route.originalPath, 
      routeParams = current.params, 
      resolvedRoute; 

     console.log(fullRoute); 
     console.log(routeParams); 

     resolvedRoute = fullRoute.replace(/:id/, routeParams.id); 
     console.log(resolvedRoute); 
    }); 
}); 

A seconda di esattamente che cosa dovete fare con la stringa di percorso, questo potrebbe essere disordinato rispetto alla risposta di Flek (ad esempio, se si dispone di più params), o se non si vuole essere vincolati alle params percorso nomi.

Nota anche: C'è una parentesi graffa mancante nel codice per la parentesi di apertura $on.

Edit 15/01/2014

sembra il $$ immobili a angolare sono suggeriti per essere privato e non li devono chiamare direttamente dal nostro codice.

2
Non

una soluzione molto elegante, e ho provato solo in Chrome DevTools, ma sembra funzionare:

Object.getPrototypeOf($route.current) === $route.routes['/users/:id]; 

Per gli altri che vogliono utilizzare questo, basta sostituire '/users/:id' con il modello che si è utilizzato quando hai definito il tuo percorso.

Inoltre, se si desidera far corrispondere l'altrimenti percorso, basta usare $route.routes['null']

responsabilità: Questa è solo una soluzione che ho trovato e che funziona per me. Dato che questo comportamento non è documentato, e che non l'ho testato per vedere se funziona in tutti gli scenari, usarlo a proprio rischio.

0

Penso che si può facilmente ottenere il percorso dal current

app.run(function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) { 
     console.log(current.originalPath); // Do not use $$route here it is private 
    }); 
}); 
Problemi correlati