使用 Angular 指令向 DOM 添加可切换按钮答案

【问题标题】：Adding toggleable buttons to DOM using Angular directive使用 Angular 指令向 DOM 添加可切换按钮
【发布时间】：2017-03-16 08:41:08
【问题描述】：

请参阅以下 Plunker：

https://plnkr.co/edit/gLFw26zoJeaM5qtPjCFg?p=preview

我有一个元素<sc-chart type="approved"></sc-chart> 挂钩到 scChart 指令以向页面添加图表（我省略了该部分代码，因为这与此问题无关）。添加图表后，我想在填充有名称数组的图表旁边创建一组按钮（此数组不是静态的，它将是服务调用的结果，因此我无法对按钮进行硬编码）。

我可以添加按钮并使其可点击。我什至可以在它们被选中时突出显示它们。但是，当我点击离开按钮时，我很难弄清楚如何/何时删除“活动”CSS 类。这可能是我想念的非常简单的事情。

【问题讨论】：

标签： javascript jquery angularjs dom directive

【解决方案1】：

只需添加 removeClass() 函数：

btn.on('click', {name: i}, function(event) {
  $('.pill-btn').removeClass('active');
  $(this).addClass('active');
  alert(event.data.name);
});

plunker：https://plnkr.co/edit/6Nj4beNuJf1plZmPAs0z?p=preview

【讨论】：

天哪，我以为我已经尝试过了。我一定在某处有轻微的语法错误。谢谢，这很容易。