AngularJS - Set a class name defined in the scope

Question

I am using AngularJS 1.05

I'd like to have something like this:

In my controller:

$scope.location = $location.path().split('/')[2]
$scope.lang = $routeParams.lang
$scope.bodyClassName = ((if $scope.location isnt "login" then "sub" else ""))

I'd like to report these variables in an document object to get for example:

<div class="home en sub"></div>

I tried with

<div class="{{location}} {{lang}} {{bodyClassName}}"></div>

It works on the first load but not when the view get refresh.

As the documentation says, ng-class is made to evaluate expressions, but I need to print a variable.

What is the good way for that?

pkozlowski.opensource · Accepted Answer · 2013-04-08 16:19:44Z

4

You need to watch the $location.path() to pick up route changes and update scope variables accordingly:

$scope.$watch(function() {
  return $location.path();
}, function(newPath) {
  $scope.location = $location.path().split('/')[2]
  $scope.lang = $routeParams.lang
  $scope.bodyClassName = ((if $scope.location isnt "login" then "sub" else ""))
});

and then, in your markup, as you have tried:

<div class="{{location}} {{lang}} {{bodyClassName}}"></div>

Another variation of the above is to update scope variables only on the route change success event and not in every watch.

edited Apr 8, 2013 at 16:19

answered Apr 8, 2013 at 9:50

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Laurent Over a year ago

Watching $location.path() looks like a good idea but it makes problem with $digest as it seems like a new object is created when the location changes.

Tosh · Accepted Answer · 2013-04-08 09:45:14Z

0

You could do:

<div class="location + ' ' + lang"></div>

or,

<div class="[ location, lang ].join(' ')"></div>

answered Apr 8, 2013 at 9:45

Tosh

36k11 gold badges67 silver badges58 bronze badges

Collectives™ on Stack Overflow

AngularJS - Set a class name defined in the scope

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related