I am trying to change the page header depending on current view. The header is outside of ngView. Is that possible or do I need to put the header inside the view?

My code looks similar to this:

<div id="header">
    <div ng-switch on="pagename">
        <div ng-switch-when="home">Welcome!</div>
        <div ng-switch-when="product-list">Our products</div>
        <div ng-switch-when="contact">Contact us</div>
    </div>
    (a lot of unrelated code goes here)    
</div>

<div id="content>
    <div ng-view></div>
</div>

I am trying to change the page header depending on current view. The header is outside of ngView. Is that possible or do I need to put the header inside the view?

My code looks similar to this:

<div id="header">
    <div ng-switch on="pagename">
        <div ng-switch-when="home">Welcome!</div>
        <div ng-switch-when="product-list">Our products</div>
        <div ng-switch-when="contact">Contact us</div>
    </div>
    (a lot of unrelated code goes here)    
</div>

<div id="content>
    <div ng-view></div>
</div>

• javascript
• angularjs

4 Answers 4

Give each route a name when you are defining it. Then inject $route into the controller, then have the controller publish it into the current scope. You can then bind the ng-switch to $route.current.name

You could inject the $location service and check $location.path(). http://docs.angularjs.org/api/ng.$location

JS:

function Ctrl($scope, $location) {
  $scope.pagename = function() { return $location.path(); };
};

HTML:

<div id="header">
  <div ng-switch on="pagename()">
    <div ng-switch-when="/home">Welcome!</div>
    <div ng-switch-when="/product-list">Our products</div>
    <div ng-switch-when="/contact">Contact us</div>
  </div>
</div>

Seems as it will be different controllers for header and content. Best way for communication between controllers is service. Another way - events. See Vojta answer.

A nice aproach for solving this is maybe to inject $route in your controller and then use it to grab the current route name.

app.controller('YourController', function($scope, $route){
    $scope.pagename = $route.current.$$route.name;
});

And you have to name your routes like the following:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/product-list', {
        templateUrl: 'views/product-list.html',
        controller: 'ProductsController',
        name: 'product-list'
      }).
      when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController',
        name: 'home'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

So when you load a route,the controller will read the current route name and pass it to the view in your pagename variable. Then the view will pick it up and display the correct view as you need.

Hope it helps :)