How can you alter the classList of an element in Famo.us + Angular?

Question

I'm using Famo.us + Angular. I'm able to retrieve the classList of a Surface by doing this:

$scope.findElement = function() {
    var elem = $famous.find("#colored-bg")[0].renderNode;  // Returns Surface
    console.log(elem.classList);  // RETURNS: ["purple-bg", "container-border", "box-shadow"]
};

You can't perform any of the operations on Famo.us object which you normal could to any other object on the DOM. For example, I thought I could add, remove, or replace classes, similar to this:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class'); 

add and remove do not exist, though. I can return the class list, and even individual items from the list (ex: Just the first class), but you cannot alter it. Any suggestions?

Answer 1

The setClasses method takes an array and you can set classes using:

renderNode.setClasses(['white-bg', 'big-text']);

Use addClass by passing the class name to add a class using:

renderNode.addClass('big-text');

Use removeClass by passing the class name to remove a class using:

renderNode.removeClass('big-text');

Use toggleClass by passing the class name to add/remove based on whether it exists:

renderNode.toggleClass('big-text');

Answer 2

Figured it out, courtesy of Tony Alves in the Famo.us Slack Chat:

renderNode.setClasses(['white-bg']);

This information was found in the github docs. So the entire function looks like this:

$scope.findElement = function() {
    var elem = $famous.find("#colored-bg")[0].renderNode;
      console.log(elem);
      elem.setClasses(['white-bg']);
    console.log(elem.classList);  // RETURNS: ["white-bg"]
  };

setClasses will accept an array of strings, which it them places into the Fa-Surface.