How to set a class on a containing div

Question

Hello and Thank You for looking at my problem. I am new to angularjs hence give me as much coaching as you would think I need.

I have 2 pages. (1) - singlepage.php (this one is really the main container for every other page (2) - login.html (this one is really a fragment containing text boxes for username, password etc

 <body ng-controller="AppController" class="{{bodyClass}}"> <div id="view" ng-view></div> </body>

    $routeProvider.when('/login', {
        templateUrl: 'templates/login.html',
        bodyclass: 'login',
        controller: 'LoginController'
    });

    app.controller("LoginController", function($scope, $location, AuthenticationService, $route) {
    $scope.bodyclass = 'login';

    $scope.credentials = { email: "", password: "" };
    $scope.login = function() {
    AuthenticationService.login($scope.credentials).success(function() {
         $location.path('/home');
      });
    };
});

I need the class on body element to change to say "loginbox" when the login page loads.

Thanks Again

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

There are 2 references that may help you on your path:

The ngClass directive documentation - https://docs.angularjs.org/api/ng/directive/ngClass#!
This here post: What is the best way to conditionally apply a class?

edited May 23 '17 at 12:20

Community

1
1

answered Dec 23 '14 at 18:56

lakewood

607
1
5
21

score 1 · Accepted Answer · answered Dec 23 '14 at 18:57

1

Documentation for ng-class

ng-class="{bodyClass: true}"

answered Dec 23 '14 at 18:57

Jeremy Friesen

383
1
3
13

score 1 · Answer 3 · answered Dec 23 '14 at 19:00

1

You can use the $rootScope to set the view-model for elements of the template. For instance:

app.controller("LoginController", function($rootScope, $scope, $location, AuthenticationService, $route) {
  $rootScope.bodyClass = "loginbox";
  ...
});

answered Dec 23 '14 at 19:00

Nicola Ferraro

4,051
5
28
60

How to set a class on a containing div

3 Answers3