Angular using $routeParams in Page title

Question

I found this answer in another SO question. But i would like to also use route parameters in some of the page titles.

If i have a $routeProvider like this:

$routeProvider.when('/demo/:name/:idNumber', {title : ' - :name', templateUrl: 'partials/details.html', controller: 'AppDetails'}); 

how do I match the :name in the title to the :name in the location? I tried the following

.run(['$location', '$rootScope', '$routeParams', function($location, $rootScope,   $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
    if(current.$$route.title.contains(":")){
        //Not sure how to get the route param using the title param string
    }else{
      $rootScope.title = current.$$route.title;
    }
  });
}]);

but I don't know how to get a variable from the routeParams using a string.

Answer 1

Can't you just access it like this:

$routeParams[$routeParams.title]

I think that is what you are asking, but I'm not quite sure...

Answer 2

In the routeChangeSuccess handler I added

var title = currentRoute.$$route.title;
if (title && $routeParams){
    for(var paramName in $routeParams) {
        title = title.replace(new RegExp(':' + paramName, 'g'), $routeParams[paramName]);
    }
}
$rootScope.title = title;

Answer 3

Modify your runner to check for the type of title like this,

    .run(['$rootScope', '$route', '$routeParams', function($rootScope, $route, $routeParams) {
    $rootScope.$on('$routeChangeSuccess', function() {
       if(!!$route.current.title) {
           if(typeof $route.current.title == 'function') {
               document.title = $route.current.title($routeParams);
           } else if (typeof $route.current.title == 'string') {
               document.title = $route.current.title;
           }

       }
    });
}]);

And define the function in routeProvider as you want to compose the title, like,

$routeProvider.when('/demo/:name/:idNumber', {
     title : function(params){ return "Name: " + params.name;},
     templateUrl: 'partials/details.html', 
     controller: 'AppDetails'});