用ng切换类并单击几个元素

Question

如何使用ng-click分别在几个元素上切换类？

在这个问题中，点击切换类是这样完成的：

CSS：

.red {
    color: red;
}

JS：

$scope.toggle = false;

HTML：

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

但是，如果我有几个按钮，每个按钮都应通过ng-click切换自己的类，该怎么办？

如果以这种方式设置它：

HTML：

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
<button id="btn2" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

如果我按下两个按钮，则两个按钮都将切换。

我知道一种解决方法是为每个按钮定义一个自己的ng-click事件（对于button1，例如f.ex
toggle1，对于button2，toggle2）-但这是最好的方法吗？

Answer 1

我做了简单的测试指令：

module.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

这样您就可以制作所需的任何元素切换类

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>