How to dynamically change header based on AngularJS partial view?
I just discovered a nice way to set your page title if you're using routing:
JavaScript:
var myApp = angular.module('myApp', ['ngResource'])myApp.config( ['$routeProvider', function($routeProvider) { $routeProvider.when('/', { title: 'Home', templateUrl: '/Assets/Views/Home.html', controller: 'HomeController' }); $routeProvider.when('/Product/:id', { title: 'Product', templateUrl: '/Assets/Views/Product.html', controller: 'ProductController' }); }]);myApp.run(['$rootScope', function($rootScope) { $rootScope.$on('$routeChangeSuccess', function (event, current, previous) { $rootScope.title = current.$$route.title; });}]);HTML:
<!DOCTYPE html><html ng-app="myApp"><head> <title ng-bind="'myApp — ' + title">myApp</title>...Edit: using the ng-bind attribute instead of curlies {{}} so they don't show on load
You could define controller at the <html> level.
<html ng-app="app" ng-controller="titleCtrl"> <head> <title>{{ Page.title() }}</title> ...You create service: Page and modify from controllers.
myModule.factory('Page', function() { var title = 'default'; return { title: function() { return title; }, setTitle: function(newTitle) { title = newTitle } };});Inject Page and Call 'Page.setTitle()' from controllers.
Here is the concrete example: http://plnkr.co/edit/0e7T6l
Note that you can also set the title directly with javascript, i.e.,
$window.document.title = someTitleYouCreated;This does not have data binding, but it suffices when putting ng-app in the <html> tag is problematic. (For example, using JSP templates where <head> is defined in exactly one place, yet you have more than one app.)