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
– Thalaivar, Commented Jan 11, 2016 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
– Matheus Souza, Commented Jan 11, 2016 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 — Artem
– Artem, Commented Jan 11, 2016 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
– Matheus Souza, Commented Jan 11, 2016 at 15:36

Knelis · Accepted Answer · 2016-01-11 15:16:28Z

1

I think the problem is your HTML:

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

should work.

answered Jan 11, 2016 at 15:16

Knelis

7,2192 gold badges40 silver badges59 bronze badges

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

Comments

Emil Nik · Accepted Answer · 2016-01-11 15:16:10Z

0

Try

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

Also don't forget to add the ng-controller

answered Jan 11, 2016 at 15:16

Emil Nik

295 bronze badges

1 Comment

Matheus Souza Over a year ago

It works if I use ng-controller="postCtrl" manually on #wrap. That way, all the other pages would also add the class post.

iamalismith · Accepted Answer · 2016-01-11 15:16:48Z

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, 2016 at 15:16

iamalismith

1,5719 silver badges22 bronze badges

1 Comment

Matheus Souza Over a year ago

It works if I use ng-controller="postCtrl" manually on #wrap. That way, all the other pages would also add the class post.

Thalaivar · Accepted Answer · 2016-01-11 15:20:15Z

0

<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' }">

answered Jan 11, 2016 at 15:20

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

Comments

Emil Nik · Accepted Answer · 2016-01-11 15:31:53Z

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, 2016 at 15:31

Emil Nik

295 bronze badges

Collectives™ on Stack Overflow

Angular.js add class to element when in some page

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related