JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="AppCtrl">
<button toggle-bg>a</button>
<button toggle-bg>b</button>
<button toggle-bg>c</button>
</div>
CSS
.red {
background:red;
}
.hide {
display: none;
float: left;
}
JavaScript
var app = angular.module('app', []);
app.controller('AppCtrl', function ($scope) {
});
app.directive('toggleBg', function () {
var directive = {
restrict: 'A',
link: link
}
return directive;
function link(scope, element, attr) {
element.on('click', function () {
element.toggleClass('hide');
});
}
});