Using variables in AngularJS $routeProvider

Question

Currently, the snippet for a dictionary site I'm building looks like this:

.when('/dictionary/:word2lookup', {
            title: 'The MySite dictionary',
            templateUrl : 'pages/dictionary.html',
            controller  : 'dictController'
        })

word2lookup is, as the name suggests, the word user enters in the input box and hits the submit button for a translation. When the translated data is rendered in the div below, the URL is programmed to reflect the word like so (say, the user is looking up the word, cortar):

www.mysite.com/dictionary/cortar

However, regardless of the word being looked up, as long as the user stays on this page, the title remains static, i.e. The PeppyBurro dictionary). Is there any way I could pass on the variable word2lookup to the $routeProvider and get it to render a dynamic title like Translation of cortar | The MySite Dictionary?

I tried 'Translation of :word2lookup | The MySite Dictionary' and it failed. I also tried 'Translation of' + :word2lookup + ' | The MySite Dictionary' with no success.

Possible duplicate of Angular using $routeParams in Page title — Sonaryr
– Sonaryr, Commented Dec 8, 2015 at 13:31

dr- · Accepted Answer · 2015-12-08 13:43:23Z

2

One solution would be to listen to every route change and respectively setting the document title. But many other options are possible by accessing $route.current.params['word2lookup']

app.run(['$rootScope', '$route', '$location', function($rootScope, $route, $location) {
    $rootScope.$on('$routeChangeSuccess', function() {
        if(0 === $location.path().indexOf('/dictionary/')) {
            document.title = 'Translation of ' + $route.current.params['word2lookup'] + ' | ' + $route.current.title;
    });
}]);

answered Dec 8, 2015 at 13:43

dr-

1131 gold badge2 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using variables in AngularJS $routeProvider

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related