Skip to content

Instantly share code, notes, and snippets.

@vojtajina
Created June 13, 2011 12:56
Show Gist options
  • Save vojtajina/1022724 to your computer and use it in GitHub Desktop.
Save vojtajina/1022724 to your computer and use it in GitHub Desktop.
Angular - binding title example
<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org" ng:controller="Main">
<head>
<title ng:bind-template="Prefix: {{pageTitle}}"></title>
<script type="text/javascript" src="build/angular.js" ng:autobind></script>
<script type="text/javascript">
function Main(){}
function Child(){}
</script>
</head>
<body>
<a href ng:click="$root.pageTitle = 'parent'">set title to parent</a>
<div ng:controller="Child">
<a href ng:click="$root.pageTitle = 'child title'">set title to child</a>
</div>
<a href ng:click="partial='content.html'">load partial</a>
<ng:include src="partial">nothing loaded</ng:include>
</body>
</html>
This is partial content, which sets title to partial...
<div ng:init="$root.pageTitle = 'partial'"></div>
@isAlmogK
Copy link

Wasn't able to get this to work, I did update the code to use ng-bind-template also tried http://docs.angularjs.org/api/ng.directive:ngBindTemplate

Maybe I'm missing something

@abourget
Copy link

abourget commented Jan 8, 2013

What I did:

in my .config() call, injecting $routeProvider:

.when('/', {templateUrl: "/path/to/home.html",
            controller: 'HomeCtrl',
            title: 'Home'})

in my .run() call, injecting $rootScope:

$rootScope.page_title = 'Admin';
$rootScope.$on('$routeChangeSuccess', function() {
  $rootScope.page_title = $route.current.$route.title;
});

in my .html file:

<title ng-bind="$root.page_title + ' - Suffix'">Admin - Suffix</title>

That way, I keep my routes and titles cleanly at one place.

@johnschult
Copy link

Nice, I like this one 🍺

@davidchase
Copy link

I used $rootScope.page_title = $route.current.title;
without the extra $route after current otherwise i got error title not defined.
But otherwise thanks for the tip definitely clean.

@enriquemr
Copy link

@abourget With your solution it gets "broken" when you wirte directly in your browser any different to "/" route, you can check it in your console ( chrome ):

var app= angular.module( 'myApp', [] )
.config( function( $routeProvider ){

    $routeProvider.when('/', {
        title: "Access",
        templateUrl: 'partials/login.html',
    });

    $routeProvider.otherwise({ redirectTo: '/' });

})
.run( [ '$location', '$rootScope', function( $location, $rootScope ){

    $rootScope.$on( '$routeChangeSuccess', function( event, current, previous ){
        //console.log( current.$$route.title );
        $rootScope.title= _.isUndefined( current.$$route.title ) ? 'MyApp' : current.$$route.title;
    });

}]);

Currently I'm using other "work-around" to this, is less fancy but works under any use case:

var app= angular.module( 'myApp', [] )
.config( function( $routeProvider ){

    $routeProvider.when('/', {
        templateUrl: 'partials/login.html',
        controller: function( $location, $rootScope ){
            $rootScope.title= 'Acceso';
        }

    });

    $routeProvider.otherwise({ redirectTo: '/' });

});

HTML side:

<title>{{ title }}</title>

@maartenst
Copy link

This doesn't seem to work for Internet Explorer 8, I had to resort to setting $window.document.title from my controller.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment