2

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!

Carrie
  • 480
  • 3
  • 10
  • 25
  • Have you tried using `$scope.$apply()`? – Foreign Object Jan 08 '16 at 17:42
  • 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 Jan 08 '16 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 Jan 08 '16 at 19:35

2 Answers2

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.

Johannes Jander
  • 4,974
  • 2
  • 31
  • 46
  • 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("
    ");`
     – Carrie Jan 08 '16 at 19:32
  • 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? – Carrie Jan 08 '16 at 19:37
  • 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 = "
    ";` then `element.append($compile(container)($scope);`
     – Johannes Jander Jan 08 '16 at 19:40
  • 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. – Carrie Jan 08 '16 at 19:44
  • 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? – Johannes Jander Jan 08 '16 at 19:57
  • right. So I tried your way, it doesn't give me compile error, but I inspect the html, it just display `"
    "` literally. The style doesn't show. I wonder why?
     – Carrie Jan 08 '16 at 20:00
  • and based on the font color, I can see it doesn't recognize it in the right way, `class='class1 class2 ng-class=\"{'` become a class, and the later part become another one actually... – Carrie Jan 08 '16 at 20:15
  • OK, then try `var container = "
    ";` - something is wrong, you couldn't set up a plunkr or something like that?     – Johannes Jander Jan 08 '16 at 20:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100186/discussion-between-yabin-song-and-johannes-jander). – Carrie Jan 08 '16 at 20:16
  • class='class1 class2' ng-class=\"{' become a class - that means you don't have a single quote character (') after class2 – Johannes Jander Jan 08 '16 at 20:18
  • ohhh, my fault, I thought that was your typo so I didn't do that `'`. It actually works! It's perfect... you really helped me out. Thank you so much! – Carrie Jan 08 '16 at 20:20
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}">
manzapanza
  • 6,087
  • 4
  • 39
  • 48