AngularJS dynamically set class on tag based on route

Question

I'm not sure the best way to approach this.

I want to dynamically set a class on my /login route so that my login page can have a large background image.

What is the best way to approach this?

Here's my current code:

<!DOCTYPE html>
<html class="SOME_DYNAMIC_CLASS_HERE_BASED_ON_ROUTE">
...
</html>
<body ng-app="myApp">
  <div ng-view=""></div>
</body>

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider
      .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginCtrl'
        })
      .when('/', {
        templateUrl: 'dashboard.html',
        controller: 'DashboardCtrl'
      })

ryeballar · Accepted Answer

You must have your ng-app attached in the <html> element, to have any sort of connection between angular and the view. Since you want something to change base on the current route of your application, then why not use those routes as a reference for your configuration, e.g. the $routeProvider configuration. Attach all your configuration, including configuration from classes to styles or any other configuration within the route object. You can then create a directive that listens to route changes via $routeChangeSuccess and then get the current route and other properties using the $route object defined as the second parameter of the $routeChangeSuccess listener, once you have those properties, you can do whatever you want with it e.g. append a class to that directive element.

DEMO

Javascript

Configuration

  .config(function ($routeProvider) {
    $routeProvider
      .when('/dashboard', {
        templateUrl: 'dashboard.html',
        'class': 'bg-dashboard'
      })
      .when('/login', {
        templateUrl: 'login.html',
        'class': 'bg-login'
      })
      .otherwise({redirectTo: '/login'});
  });

Directive

  .directive('classRoute', function($rootScope, $route) {

    return function(scope, elem, attr) {
      var previous = '';
      $rootScope.$on('$routeChangeSuccess', function(event, currentRoute) {
        var route = currentRoute.$$route;
        if(route) {

          var cls = route['class'];

          if(previous) {
            attr.$removeClass(previous);
          }

          if(cls) {
            previous = cls;
            attr.$addClass(cls);
          }
        }
      });
    };

  });

HTML

<html ng-app="myApp" class-route>...</html>

AngularJS dynamically set class on <html> tag based on route

Tags:

javascript

angularjs

Catfish

1 Answers

ryeballar

Recent Activity

Donate For Us