Skip to content

Instantly share code, notes, and snippets.

@vojtajina

vojtajina/angular-bind-title.html

Created June 13, 2011 12:56
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save vojtajina/1022724 to your computer and use it in GitHub Desktop.
Save vojtajina/1022724 to your computer and use it in GitHub Desktop.
Download ZIP
Angular - binding title example
Raw
angular-bind-title.html
<!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>
Raw
content.html
This is partial content, which sets title to partial...
<div ng:init="$root.pageTitle = 'partial'"></div>
@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