0

I'm re-writing an app using angularjs. Until today each route of the app had each own controller and a title as well for the prowser using a service like that:

  myApp.factory('PageTitle', function(){
     var title = 'Default title';
     return {
       title: function() { return title; },
       setTitle: function(newTitle) { title = newTitle; }
     };
  });

which the i use in the controller like that:

PageTitle.setTitle(TitleVariable);

That worked perfectly until now. I need as i said to re-write my app to have only one controller for all the routes.

So i'm trying to run a function looking at the route change with the current route path to update the title (which i forgot to mention is a dynamic information, so i cannot add a title variable in the routes file i guess) but it just not working.

What is the correct way to achieve that?

My routes looking that that:

  myApp.config([
    '$routeProvider',
    '$locationProvider',
    function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(false).hashPrefix('!'); 


$routeProvider

  // route for the home page
  .when('/', {
    templateUrl : 'views/homepage.html'
  })

  // route for the home page
  .when('/home/:pageSlug/', {
    templateUrl : 'views/homepage.html'
  })

etc.

I'm calling the controller in the index.html file on header like:

<html data-ng-app="myApp" data-ng-controller="appCtrl">

And i'm getting the title like that:

<title data-ng-bind="PageTitle.title()"></title>
Vassilis Pits
  • 3,788
  • 4
  • 33
  • 48
  • Please refer to this stack-overflow post: http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view – Yashika Garg May 26 '15 at 10:55
  • @YashikaGarg i did read it already but it seems there only the solution i have already with different controller for each route. – Vassilis Pits May 26 '15 at 11:02

0 Answers0