How to change CSS class of HTML element from inside AngularJS controller logic

Question

I'm looking for an example to change CSS class of an HTML element from inside the logic of the AngularJS controller

In the controller, something like this:

function myFunc() {
  //do a calculation
  //result is 3
  //change the class of HTML element with id="3" to add class="hidden"

I can't do it with ngClick because the controller decides which element to change, not the user.

Like if I wanted to recreate that Simon game from the 80's I would have the controller pick a random number 1-4 and then light up the HTML element and the user would have to click it in a certain amount of time.

choice = Math.floor(Math.random() * 4) + 1;
if ( choice == 2 ) {
  lightUpBlue();
  setTimeout(turnOffBlue();, 2000);
}

How would I write lightUpBlue() to change the color of a button in the HTML document, and maybe change the hyperlink or some other property?

Thanks in advance.

It's hard for me to pick the right answer. Shashank's answer is working for me now but I am starting to think Luba's might suit me better but I haven't been able to implement it yet. — xdfil
– xdfil, Commented Jan 1, 2015 at 14:38

Luba · Accepted Answer · 2015-01-01 13:21:18Z

1

Use ng-class inside your html code.

HTML for Elements

ng-class="myFunction"

Documentation for ng-class

Controller

scope.myFunction = function() {
}

Documentation for controller
Documentation for scopes

answered Jan 1, 2015 at 13:21

Luba

4952 silver badges5 bronze badges

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

8 Comments

xdfil Over a year ago

I don't think that will work the way I want it. It would require the change to be initiated by from the HTML, the front end. I need it to initiate from the controller, back end. My understanding may be wrong though.

Luba Over a year ago

The controller is on the frontend, too. Using AngularJS.

xdfil Over a year ago

Well yeah it's on the client side. So far I have been thinking of it like client-side Back-end because it practically talks to the DB directly. You can even stick a mini static DB in there in the form of an object. I have a hard time calling the controller "front-end".

Luba Over a year ago

You can use an isomorphic solution. There is a controller backend, too.

xdfil Over a year ago

Where can I find more info about the it/by/ps functions? I'm trying to make your answer work. If your answer does what I think it might do it may be a more flexible solution.

|

Shashank Agrawal · Accepted Answer · 2015-01-01 13:23:25Z

1

Best practice is to avoid manipulating DOM element from inside controllers or services. For this you can write a custom directive.

Well you can modify any of the element like:

angular.element(document.querySelector('[id="3"]')).addClass('hidden');

answered Jan 1, 2015 at 13:23

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

2 Comments

xdfil Over a year ago

Why should one avoid manipulating DOM from the controller? I'm not familiar with the terminology "custom directive", is that what your example is? Where do I put it if not the controller?

Shashank Agrawal Over a year ago

Because the business logic & view logic needs to be separated and that is what angular is knows as an MVC architecture i.e why we should not do the DOM manipulation in controllers. Angular provides various directive and we can create our own directives to do more. Go with the link docs.angularjs.org/guide/directive and take a high overview, you will get the gist.

xdfil · Accepted Answer · 2015-01-01 15:20:35Z

0

ngShow Looks like the best solution for hiding an element.

answered Jan 1, 2015 at 15:20

xdfil

2911 silver badge14 bronze badges

Collectives™ on Stack Overflow

How to change CSS class of HTML element from inside AngularJS controller logic

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related