-
-
Save vojtajina/1022724 to your computer and use it in GitHub Desktop.
| <!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> |
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.
Nice, I like this one 🍺
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.
@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>
This doesn't seem to work for Internet Explorer 8, I had to resort to setting $window.document.title from my controller.
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