How to change the page title using a variable in Angular Js?

Question

I am changing my title dynamically in AngularJs, using the following code:

app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            title: 'My Tagline',
            controller : 'IndexController',
            templateUrl : 'static/app_partials/index.html'
        })
        .when('/categories/:categoryPk/', {
            title: $scope.category.name,
            controller : 'CategoryController',
            templateUrl : 'static/app_partials/category.html'
        })
        .otherwise({ redirectTo : '/' });
}]);

Html

<title ng-bind="'My Brand - ' + title">My Brand</title>

So, for the IndexController, the title is just a simple string, so this method works nicely. However, for my CategoryController, I want the title to be generated from a variable, specifically, $scope.category.name, which I initialize in my controller code. How can I do this? Any help?

You can also find the answer here: https://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view — P.S., May 27 '17 at 14:10

score 3 · Answer 1 · answered May 27 '17 at 13:48

3

use ng-bind-template as follow:

<title ng-bind-template="My Brand - {{$root.title}}">My Brand</title>

answered May 27 '17 at 13:48

mastilver

665
6
18

also have to remove `title: $scope.category.name,` from routing config...there is no `$scope` there – charlietfl May 27 '17 at 13:51
And then how will put my variable as the title from the controller? – darkhorse May 27 '17 at 13:53
@TahmidKhanNafee You could do it inside the `routeChangeSuccess` even handler – mastilver May 27 '17 at 13:57

score 0 · Answer 2 · answered May 27 '17 at 14:23

0

Take a look at ng-meta to set dynamic meta tags in your AngularJS single page application

answered May 27 '17 at 14:23

Amadou Beye

2,538
3
16
37

How to change the page title using a variable in Angular Js?

2 Answers2