Add CSS class in Angular

Question

I have two places need to add a css class called myClass dynamically. I only want to add this class when $root.myBool is true. I got one of them work using this:

<ion-side-menu-content class="ng-class: $root.myBool ? 'myClass' : ''">

But I can't get the other one work. Here's the issue, this one above is written in cshtml directly. But the other one is added using angularJS inside javascript file. The other one looks like this in .js file var container = jqLite("<div class='class1 class2'>"); I want to add myClass right after class2, something like:

var container = jqLite("<div class='class1 class2 ng-class: $root.myBool ? 'myClass' : '''>");

I tried, but couldn't make it work. Hope someone can help..

Also I have a second idea to achieve this, since myClass is really only one line of style:

.myClass {
    top: 78px;
}

So I was thinking maybe I also can change the top attribute inside javascript. So I'll add the class like this var container = jqLite("<div class='class1 class2 myClass'>"); Then change the top attribute inside the javascript where I change myBool:

$scope.myBool = false;
//get 'myClass' somehow and change the attribute 'top' here.

I know for jQuery I can do $('.myClass').css("top", "0px");. But I'm using ionic here, so the syntax is different, that's my issue.

So there're two ways I can think of to do this, make either one works will be more than enough for me. Thanks a lot!

Angular will not resolve the ng-class in container, because it doesn't "know" about it. A compile loop will read it if you add this element to the DOM, but it really depends on your working context. Its best practice that if you are manipulating DOM elements using JQueryLite, you should be doing so within a directive, in which case you should be using $compile(container) — IanGabes
– IanGabes, Commented Jan 8, 2016 at 17:51
@lanGabes I have the $compile(container) part in my code. It just like you said, it doesn't resolve the ng-class. — Carrie
– Carrie, Commented Jan 8, 2016 at 19:35

Johannes Jander · Accepted Answer · 2016-01-08 21:18:44Z

3

If you generate HTML on the fly, you need to $compile it:

$compile(container)(scope);

Furthermore, I think writing ngClass as its own attribute in the form of ng-class="{'myClass': $root.myBool}" is much cleaner and less error-prone than the form inside a class attribute.

Tying it together:

var container = "<div class='class1 class2' ng-class=\"{'myClass': $root.myBool}\">"; 
element.append($compile(container)($scope);

There's not need to run it through jqLite before compiling it.

edited Jan 8, 2016 at 21:18

answered Jan 8, 2016 at 17:45

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

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

11 Comments

Carrie Over a year ago

It seems already compiled according to the code. I can see element.append($compile(container)($scope.$new())); in the code. Seems it just cannot compile ng-class part when I added it like this : var container = jqLite("<div class='class1 class2 ng-class: $root.myBool ? 'myClass' : '''>");

Carrie Over a year ago

I'm thinking it doesn't compile successfully, is it because the syntax is wrong. I noticed there's this ' and '' issue in this line of code. there're several '' and ', I kind of can't make it right.... maybe that's why?

Johannes Jander Over a year ago

Why compile to a newly-created child scope (the $scope.$new())? And if you want to use $compile, I believe you don't need the jqLite()-part, just use a string: var container = "<div class='class1 class2' ng-class=\"{'myClass': $root.myBool}\">"; then element.append($compile(container)($scope);

Carrie Over a year ago

these are all existing code of the project. I'm very new on this and I'm only trying to add a new class on it, I believe my team will not want me to change old stuff since everything is working perfectly. They only want this new feature. Maybe because I didn't use `\` inside the class. Let me try first.

Johannes Jander Over a year ago

Oh, and if you get compile errors, you need to tell us... You know how to look at the developer console of Firefox/Chrome, right?

|

manzapanza · Accepted Answer · 2016-01-08 18:27:57Z

0

In my opinion you could use simply ngClass and ngStyle:

Controller:

$scope.topPx = '20px';

HTML:

<ion-side-menu-content ng-class="{'myClass': $root.myBool}" ng-style="{'top': topPx}">

answered Jan 8, 2016 at 18:27

manzapanza

6,2814 gold badges43 silver badges51 bronze badges

1 Comment

Carrie Over a year ago

The <ion-side-menu-content> one works fine. My problem is the second one. That <div> generated inside javascript.

Collectives™ on Stack Overflow

Add CSS class in Angular

2 Answers 2

11 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Linked

Related