Angular.js add class to element when in some page

Question

I'm trying to add the class post to my div #wrap when i'm on the page /post. That's what I have:

$routeProvider

when('/post', {
    templateUrl : 'views/post.php',
    controller  : 'postCtrl'
})

Controller

carolvaladares.controller('postCtrl', function($scope) {
    $scope.post = true;
});

HTML

<div id="wrap" ng-class="{true: 'post'}[post]">

When on /post, $scope.post is true. If the $scope.post is true, add the class post to #wrap

The thing is that when I go to /post, It does not read the $scope.post unless I use ng-controller="postCtrl" manually.

Thanks in advance.

-- EDITED --

The $scope.post returns true when I use {{post}} on /post. Still I can't work with ng-class.

-- EDITED --

The problem still happening because the #wrap is out of my ng-view. So I guess what I'm trying to do, the way I'm trying to do won't be possible.

Does your controller load when you navigate to /post and i hope you are using ng-view — Thalaivar, Jan 11 '16 at 15:10
Yes. I'm using ng-view, and the controller loads when I navigate to /post. I tested it using a simple $scope.message and {{message}} to confirm it. — Matheus Souza, Jan 11 '16 at 15:13
It is not clear where #wrap is placed in html, please check scopes, may be #wrap is outside controller's scope. [Check example](http://plnkr.co/edit/6lFsKklLampT4Tf767YE) — Artem, Jan 11 '16 at 15:27
@Artem Yeah man, it worked this way here too. But I'm trying to understand how could I affect some element out of my ng-view without specifying the controller manually. Because if I specify the controller, It would affect every page on my application. — Matheus Souza, Jan 11 '16 at 15:36
@MatheusSouza Could you look at [How to detect current state within directive](http://stackoverflow.com/questions/17215656/how-to-detect-current-state-within-directive) — Artem, Jan 11 '16 at 15:45
@Artem Thanks for the help. I'll look at it and try to solve this. — Matheus Souza, Jan 11 '16 at 15:49

score 1 · Answer 1 · answered Jan 11 '16 at 15:16

1

I think the problem is your HTML:

<div id="wrap" ng-class="{ className: post === true }">

should work.

answered Jan 11 '16 at 15:16

Knelis

score 0 · Answer 2 · answered Jan 11 '16 at 15:16

0

Try

<div id="wrap" ng-class="{'post': post}">

Also don't forget to add the ng-controller

answered Jan 11 '16 at 15:16

Emil Nik

It works if I use `ng-controller="postCtrl"` manually on `#wrap`. That way, all the other pages would also add the class `post`. – Matheus Souza Jan 11 '16 at 15:21

score 0 · Answer 3 · answered Jan 11 '16 at 15:16

0

ng-class works like this:

ng-class="{'classNameToApply': angularExpression}"

The 'classNameToApply' will be applied when the angularExpression evaluates to something truthy.

So in your case, to apply the class of 'post', you would do <div id="wrap" ng-class="{'post': post}">

answered Jan 11 '16 at 15:16

iamalismith

It works if I use `ng-controller="postCtrl"` manually on `#wrap`. That way, all the other pages would also add the class `post`. – Matheus Souza Jan 11 '16 at 15:20

score 0 · Answer 4 · answered Jan 11 '16 at 15:20

<div id="wrap" ng-class="{true: 'post'}[post]">

The statement you have given for ng-class should work, could you change your post variable to something else to check if its working like below:

<div id="wrap" ng-class="{true: 'post'}[someValue]">

Apart from this, there is other solutions below which you can try:

Sol1:

<div id="wrap" ng-class="{'post': post}">

Sol2

<div id="wrap" ng-class="post ? 'post' : 'somethingelse' }">

score 0 · Answer 5 · answered Jan 11 '16 at 15:31

0

I would suggest you try something like this:

when('/post', {
    templateUrl : 'views/post.php',
    controller  : 'postCtrl',
    activetab: 'post'
})

and add:

<div id="wrap" ng-class="{post: $route.current.activetab == 'post'}"">

answered Jan 11 '16 at 15:31

Emil Nik

5 Answers5