使用 Angular 指令将可切换按钮添加到 DOM

Question

查看以下 Plunker：

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

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

我可以添加按钮并使它们可点击。当它们被选中时，我什至可以突出显示它们。但是，当我点击按钮时，我很难弄清楚 how/when 删除 "active" CSS class。这可能是我所缺少的非常简单的东西。

Answer 1

只需添加 removeClass() 函数：

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

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

使用 Angular 指令将可切换按钮添加到 DOM

Adding toggleable buttons to DOM using Angular directive

javascript

jquery

dom

directive

angularjs