如何更改 Famo.us + Angular 中元素的 classList？答案

【问题标题】：How can you alter the classList of an element in Famo.us + Angular?如何更改 Famo.us + Angular 中元素的 classList？
【发布时间】：2015-09-01 19:30:18
【问题描述】：

I'm using Famo.us + Angular. 我可以通过这样做来检索 Surface 的 classList：

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

您不能对 Famo.us 对象执行任何您通常可以对 DOM 上的任何其他对象执行的操作。例如，我认为我可以添加、删除或替换类，类似于：

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

不过，add 和 remove 不存在。我可以返回班级列表，甚至可以返回列表中的个别项目（例如：只是第一节课），但您不能更改它。有什么建议吗？

【问题讨论】：

标签： javascript angularjs famo.us famous-angular

【解决方案1】：

setClasses 方法接受一个数组，您可以使用以下方法设置类：

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

通过传递类名来使用addClass来添加一个类：

renderNode.addClass('big-text');

通过传递类名来使用removeClass 来删除一个类：

renderNode.removeClass('big-text');

使用toggleClass，根据是否存在传递类名来添加/删除：

renderNode.toggleClass('big-text');

【讨论】：

【解决方案2】：

在 Famo.us Slack 聊天中感谢 Tony Alves：

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

此信息可在github docs 中找到。所以整个函数看起来是这样的：

$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 将接受一个字符串数组，并将其放入 Fa-Surface。

【讨论】：