Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In AngularJS, can I use current route in ngSwitch outside of ngView

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>
like image 631
warpech Avatar asked Sep 01 '12 23:09

warpech


4 Answers

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

like image 149
Misko Hevery Avatar answered Nov 18 '22 10:11

Misko Hevery


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>
like image 45
Andrew Joslin Avatar answered Nov 18 '22 11:11

Andrew Joslin


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.

like image 1
Artem Andreev Avatar answered Nov 18 '22 10:11

Artem Andreev


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 :)

like image 1
Andrés Smerkin Avatar answered Nov 18 '22 09:11

Andrés Smerkin