Created
June 13, 2011 12:56
-
-
Save vojtajina/1022724 to your computer and use it in GitHub Desktop.
Angular - binding title example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This is partial content, which sets title to partial... | |
| <div ng:init="$root.pageTitle = 'partial'"></div> |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice, I like this one 🍺