current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite
1

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.

share|improve this question
    
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. – xdaxdb Jan 1 '15 at 14:38
up vote 1 down vote

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

share|improve this answer
    
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. – xdaxdb Jan 1 '15 at 13:24
    
The controller is on the frontend, too. Using AngularJS. – Luba Jan 1 '15 at 13:26
    
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". – xdaxdb Jan 1 '15 at 13:35
    
You can use an isomorphic solution. There is a controller backend, too. – Luba Jan 1 '15 at 13:42
    
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. – xdaxdb Jan 1 '15 at 14:40
up vote 1 down vote

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');
share|improve this answer
    
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? – xdaxdb Jan 1 '15 at 13:27
1  
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. – Shashank Agrawal Jan 1 '15 at 13:33
up vote 0 down vote

ngShow Looks like the best solution for hiding an element.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.