CODEWITHSUNDEEP
cssangularjs
Austin Perez
Austin Perez

Reputation: 597

AngularJs - Change body ID or Css with Ng-view

I have certain pages that have a different body backround-color.

How can I change the body's css or give the body a different ID tag for each TemplateURL?

I can change the Template URL background, but its not the full body background. I want to change the entire body's background color.

Index HTML

<body data-ng-controller="HeaderCtrl" data-ng-class="body[[bodyClass]]"> <!-- I want to be able to change this with different page views -->

  <div>
    <div class="top-header" data-ng-include="templateUrl"></div>
  </div>

  <div class="page [[ pageClass ]]" ng-view autoscroll="true">
  </div>

</body>

Javascript

var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/frontdesk', {
      templateUrl : 'pages/frontdesk.html',
      controller : 'FrontdeskCtrl'
  })
  .otherwise({ 
      redirectTo: '/signin'
  });
});

Controller

app.controller('HeaderCtrl', function($scope, $location) {
$scope.pageClass = 'top-header';
$scope.$on('$locationChangeSuccess', function() {
    var path = $location.path();
    $scope.templateUrl = (path==='/signin' || path==='/contact') ? 'pages/SigninHeader.html' : 'pages/NormalHeader.html' ;
});
$scope.$on('$locationChangeSuccess', function() {
    var path = $location.path();
    $scope.bodyClass = (path==='/room' || path==='/frontdesk') ? 'dark' : 'white';
});
});

CSS

.bodydark {
  background-color: #000 !important;
}

.bodywhite {
  background-color: #fff !important;
}

Upvotes: 0

Views: 763

Answers (1)

t0mpl
t0mpl

Reputation: 5025

try it like this

<body data-ng-controller="HeaderCtrl" data-ng-class="{'bodydark' : bodyClass == 'dark', 'bodywhite' : bodyClass == 'white'}">

Upvotes: 1

Related Questions