2013-03-12 3 views
25

я определил некоторые маршруты:Как получить название маршрута при изменении местоположения?

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

И я хочу, чтобы получить имя маршрута, когда пользователь изменяет маршрут:

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: ' + ???); 
    } 
    }]); 

Но я не знаю, как получить его. Я могу получить templateUrl, но не название маршрута.


UPDATE

Более сложный случай использования:

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

Если путь тока:

/users/12345 

Он должен соответствовать /users/:id, но как я могу знать, какие маршрут сопоставляется и для получения маршрута имя /users/:id?

ответ

61

Вы можете ввести службу определения местоположения $ и использовать ее функцию 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); 
    }); 
    }]); 

Вы можете найти другие методы, полезные $ местоположение в docs

UPDATE

Если вы хотите иметь массив текущих параметров маршрута, просто вводят услугу $ routeParams, как я сделал выше.

+0

@Flex, Смотрите мой обновленный вопрос :) – Freewind

+2

FYI: Первый аргумент четным обработчику угловому не сфера, это событие , Я отредактировал фрагмент кода, чтобы отразить это. FWIW, объект currentScope доступен для объекта события. –

+0

У него плохой синтаксис, и даже после исправления не работает: Неизвестный провайдер: $ routeParamsProvider <- $ routeParams – Mike

7

Вам не нужно вводить $location и $routeParams.
Вы можете использовать current.$$route.originalPath

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

Этого достаточно для простых маршрутов (без :id и т.д.).

С более сложным вариантом использования он вернет /users/:id.
Но вы можете извлечь параметр :id из current.params.id и заменить его на полный маршрут.

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); 
    }); 
}); 

В зависимости от того, что вам нужно сделать с маршрута строки, это может быть грязным по сравнению с ответом Флек (например, если у вас есть несколько Params), или если вы не хотите быть привязанными к маршруту Params имена.

Также примечание: В вашем коде отсутствует замыкающая скобка для открывающей скобы $on.

Редактировать 15/01/2014

Похоже, что $$ свойства в угловому предлагается быть частным, и мы не должны называть их прямо из нашего кода.

2

Не очень элегантное решение, и я проверил его только в Chrome DevTools, но это, кажется, работает:

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

Для других желающих использовать это, просто замените '/users/:id' с шаблоном, который вы использовали при вы определили свой маршрут.

Кроме того, если вы хотите, чтобы соответствовать иным путем, просто использовать $route.routes['null']

Отказ от ответственности: Это просто обходной путь, который я нашел, и который работает для меня. Учитывая, что это поведение не документировано, и что я не тестировал его, чтобы увидеть, работает ли он во всех сценариях, используйте его на свой страх и риск.

0

Я думаю, что вы можете легко получить путь от current

app.run(function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function (e, current, pre) { 
     console.log(current.originalPath); // Do not use $$route here it is private 
    }); 
}); 
Смежные вопросы